
vue 导出、导入excel、文件、预览笔记
·
1、安装xlsx
cnpm i xlsx @vue-office/excel vue-demi @vue-office/docx docx-preview --save
2、使用
1、页面table导出
//导出excel
exportExcel(){
//1、页面table导出
const tableDom = document.querySelector('#elTable');
const tableWs = utils.table_to_sheet(tableDom);
const wb = utils.book_new();
utils.book_append_sheet(wb, tableWs, "sheet1");
writeFile(wb, "列表.xlsx");
},
2、根据数据导出
data() {
return {
excelHTML:'',
tableData:[
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
]
}
},
methods: {
//导出excel
exportExcel(){
//json数据导出
const ws = utils.json_to_sheet(this.tableData);
const wb = utils.book_new();
utils.book_append_sheet(wb, ws, "sheet1");
writeFile(wb, "列表.xlsx");
},
}
3、选择文件导出html或json数据
//选择文件
selectedFile(e){
console.log(e)
let _file = e.target.files[0]
//1、读取为前端html或json
_file.arrayBuffer().then((res) => {
// console.log(res,'res')
const wb = read(res);
// console.log(wb,'wb')
const sheet1 = wb.Sheets.sheet1
// console.log(sheet1,'sheet1')
const _data = utils.sheet_to_json(sheet1);
const _html = utils.sheet_to_html(sheet1);
console.log(_html,'_html')
console.log(_data,'_data')
this.excelHTML = _html
})
}
4、加载本地excel预览(@vue-office/excel)
<vueofficeExcel v-if="excelSrc" :src="excelSrc" style="height:500px"></vueofficeExcel>
import vueofficeExcel from "@vue-office/excel";
// "@vue-office/docx" "@vue-office/pdf"
import "@vue-office/excel/lib/index.css"
components: {
vueofficeExcel
},
data() {
return {
excelHTML:'',
excelSrc:"",//静态远程文件地址、本地文件地址或者本地选择返回base64
tableData:[
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
]
}
},
methods: {
//选择文件
selectedFile(e){
console.log(e)
let _file = e.target.files[0]
const fr = new FileReader();
fr.readAsDataURL(_file);
fr.onload = (e) => {
this.excelSrc = e.target.result;
}
}
}
5、word操作(@vue-office/docx=>预览)
<vueofficeDocx v-if="wordPath" :src="wordPath" style="height:500px"></vueofficeDocx>
import vueofficeDocx from "@vue-office/docx";
import "@vue-office/excel/lib/index.css"
components: {
vueofficeDocx
},
data() {
return {
wordPath:'',
}},
methods:{
//选择文件
selectedFile(e){
console.log(e)
let _file = e.target.files[0]
const fr = new FileReader();
fr.readAsDataURL(_file);
fr.onload = (e) => {
console.log(e.target,'word')
this.wordPath = e.target.result;
}
}
}
6、word预览(docx-preview)
<div ref="docxPreview"></div>
import { renderAsync } from "docx-preview"
//选择文件
selectedFile(e){
let _file = e.target.files[0];
//blob,arrayBuffer
renderAsync(_file, this.$refs.docxPreview);
}
7、导入模板按模板格式生成文档
1、新建template.docx样式如下
2、安装pizzip、docxtemplater、file-saver及使用
cnpm i pizzip docxtemplater file-saver --save
import PizZip from 'pizzip'
import Docxtemplater from 'docxtemplater'
import { saveAs } from 'file-saver'
tableData:[
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
],
//选择文件
selectedFile(e){
let data ={
tableData:this.tableData
}
let _file = e.target.files[0];
_file.arrayBuffer().then((res) => {
let zip = new PizZip(res);
const doc = new Docxtemplater(zip);
doc.setData(data)
doc.render();
const out = doc.getZip().generate({
type: "blob",
mimeType:
"application/vnd.openxmlformats-officedocument.wordprocessingml.document"
})
saveAs(out, "生成的文档.docx")
})
}
所有代码
<template>
<div id="app">
<div class="table_container">
<el-row>
<el-button type="primary" @click="exportExcel">xlsx导出</el-button>
<input type="file" @change="selectedFile" />
</el-row>
<el-table
id="elTable"
border
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
<div class="excel-content" v-html="excelHTML"></div>
<!-- <vueofficeExcel v-if="excelSrc" :src="excelSrc" style="height:500px"></vueofficeExcel>
<vueofficeDocx v-if="wordPath" :src="wordPath" style="height:500px"></vueofficeDocx> -->
<div ref="docxPreview"></div>
</div>
</div>
</template>
<script>
import { read, writeFile, utils } from "xlsx"
import vueofficeExcel from "@vue-office/excel";
import vueofficeDocx from "@vue-office/docx";
// "@vue-office/docx" "@vue-office/pdf"
import "@vue-office/excel/lib/index.css"
import { renderAsync } from "docx-preview"
import PizZip from 'pizzip'
import Docxtemplater from 'docxtemplater'
import { saveAs } from 'file-saver'
export default {
name: 'App',
components: {
vueofficeExcel,
vueofficeDocx
},
data() {
return {
wordPath:'',
excelHTML:'',
excelSrc:"",
tableData:[
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
]
}
},
methods: {
//导出excel
exportExcel(){
//1、页面table导出
// const tableDom = document.querySelector('#elTable');
// const tableWs = utils.table_to_sheet(tableDom);
// const wb = utils.book_new();
// utils.book_append_sheet(wb, tableWs, "sheet1");
// writeFile(wb, "列表.xlsx");
//2、json数据导出
const ws = utils.json_to_sheet(this.tableData);
const wb = utils.book_new();
utils.book_append_sheet(wb, ws, "sheet1");
writeFile(wb, "列表.xlsx");
},
//选择文件
// selectedFile(e){
// console.log(e)
// let _file = e.target.files[0]
// //1、读取为前端html或json
// _file.arrayBuffer().then((res) => {
// // console.log(res,'res')
// const wb = read(res);
// // console.log(wb,'wb')
// const sheet1 = wb.Sheets.sheet1
// // console.log(sheet1,'sheet1')
// const _data = utils.sheet_to_json(sheet1);
// const _html = utils.sheet_to_html(sheet1);
// console.log(_html,'_html')
// console.log(_data,'_data')
// this.excelHTML = _html
// })
// },
//选择文件
// selectedFile(e){
// console.log(e)
// let _file = e.target.files[0]
// const fr = new FileReader();
// fr.readAsDataURL(_file);
// fr.onload = (e) => {
// this.excelSrc = e.target.result;
// }
// },
//选择文件
selectedFile(e){
let data ={
tableData:this.tableData
}
let _file = e.target.files[0];
_file.arrayBuffer().then((res) => {
let zip = new PizZip(res);
const doc = new Docxtemplater(zip);
doc.setData(data)
doc.render();
const out = doc.getZip().generate({
type: "blob",
mimeType:
"application/vnd.openxmlformats-officedocument.wordprocessingml.document"
})
saveAs(out, "生成的文档.docx")
})
}
},
}
</script>
<style lang="scss">
*{
margin:0;
padding:0;
box-sizing: border-box;
}
html,body,#app{
width: 100vw;
height: 100vh;
}
.table_container{
width: 600px;
margin:0 auto;
.excel-content{
table{
width: 100%;
border-collapse: collapse;
td {
border: 1px solid #000;
}
}
}
}
</style>
8、使用 jspdf 库将任何 HTML 页面或表单转换为 PDF
import { jsPDF } from 'jspdf';
const pdfContentEl = document.getElementById('pdf-content');
const doc = new jsPDF();
await doc.html(pdfContentEl.innerHTML).save('test.pdf');
1、自定义 PDF 方向
const doc = new jsPDF({ orientation: 'landscape' });
2、自定义 PDF 单位和尺寸
const doc = new jsPDF({ orientation: 'l', unit: 'in', format: [4, 2] });
3、将 HTML 表单转换为 PDF
jsPDF 还可以处理 HTML 元素,这些元素的外观可以根据用户交互动态变化,例如表单输入。
HTML:
<form id="form">
<input type="email" name="email" id="email" placeholder="Email" />
<br />
<input
type="password"
name="password"
id="password"
placeholder="Password"
/>
<br /><br />
<button type="submit">Submit</button>
</form>
<br />
<button id="save-pdf">Save PDF</button>
JavaScript:
import { jsPDF } from 'jspdf';
const doc = new jsPDF();
const savePdf = document.getElementById('save-pdf');
const formEl = document.getElementById('form');
savePdf.addEventListener('click', async () => {
await doc.html(formEl).save('test.pdf');
});
更多推荐
所有评论(0)