vue项目里导出word模板，导出Excel表格~预览PDF附件内容的📈📑
第一：导出Word模板
一、安装依赖包
1、docxtemplaternpm install docxtemplater pizzip -S
2、jszip-utilsnpm install jszip-utils -S
3、pizzipnpm install pizzip -S
4、FileSavernpm install file-saver --save
二、创建Word模板
根据格式样式要求，打开电脑桌面新建一个Word文档，调成需要导出的格式样式做为导出模板。数据使用
{变量}代替
或者word模板是自己准备好：
模板存放位置：
使用vue-cli2的时候，放在static目录下；使用vue-cli3的时候，放在public目录下
三、组件使用
<template>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item
label="用户名称"
prop="userName"
:rules="{
required: true,
message: '请输入用户名称',
trigger: 'blur'
}"
>
<el-input v-model="form.userName"></el-input>
</el-form-item>
<el-form-item
label="值"
prop="value"
:rules="{
required: true,
message: '当前项为必填项',
trigger: 'blur'
}"
>
<el-input v-model="form.userName"></el-input>
</el-form-item>
<el-form-item>
<el-button
style="background-color: #1094cb;"
type="primary"
@click="onSubmit('form')"
>导出</el-button
>
</el-form-item>
</el-form>
</template>
data里
form: {
workWPS: "银川市人社局",
userName: "王强",
sex: "男",
middleTime: "2023-12-31",
idCard: "653121199542516522",
phone: "18599044752",
jobTime: "2022-10-10",
jobTime2: "2021-11-00",
id: "013473479",
tipeJob: "职工",
voll: "重伤类",
address: "银川市兴庆区丽景湖畔25号",
},
table: {
name:"aaa",
value:"111"
},
js里：
<script>
import JSZipUtils from 'jszip-utils'
import JSZip from 'pizzip'
import Docxtemplater from 'docxtemplater'
import { saveAs } from 'file-saver'
export default {
data() {
return {
form: {
userName: "",
value: ""
},
table:[{
name:"aaa",
value:"111"
},{
name:"bbb",
value:"222"
}]
};
},
methods: {
onSubmit(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
this.exportWord();
} else {
console.log("error submit!!");
return false;
}
});
},
exportWord() {
const _this = this
JSZipUtils.getBinaryContent('/static/word.docx', function(error, content) {
// 抛出异常
if (error) {
throw error
}
// 创建一个JSZip实例，内容为模板的内容
let zip = new JSZip(content)
// 创建并加载docxtemplater实例对象
let doc = new Docxtemplater().loadZip(zip)
// 设置模板变量的值
// doc.setData(
// _this.form,
// _this.table
// )
doc.setData({
..._this.form,
..._this.table
})
try {
// 用模板变量的值替换所有模板变量
doc.render()
} catch (error) {
// 抛出异常
// let e = {
// message: error.message,
// name: error.name,
// stack: error.stack,
// properties: error.properties,
// }
this.$message.error('导出报表失败')
throw error
}
// 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
let out = doc.getZip().generate({
type: 'blob',
mimeType:
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
})
// 将目标文件对象保存为目标类型的文件，并命名
saveAs(out, '宁夏回族自治区旧伤复发就医确认表.docx')
})
},
}
</script>四、效果图
温馨提示：
可能会出现的问题报错如下
出现此问题是因为模板路径
url写的不对，找不到模板文档~别担心，只需要修改下这里的路径就行
代码：
完整code
<template>
<div>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item>
<el-button
style="background-color: #1094cb;"
type="primary"
@click="onSubmit('form')"
>导出</el-button
>
</el-form-item>
</el-form>
</div>
</template>
<script>
import JSZipUtils from 'jszip-utils'
import JSZip from 'pizzip'
import Docxtemplater from 'docxtemplater'
import { saveAs } from 'file-saver'
export default {
data() {
return {
form: {
workWPS: "银川市人社局",
userName: "王强",
sex: "男",
middleTime: "2023-12-31",
idCard: "653121199542516522",
phone: "18599044752",
jobTime: "2022-10-10",
jobTime2: "2021-11-00",
id: "013473479",
tipeJob: "职工",
voll: "重伤类",
address: "银川市兴庆区丽景湖畔25号",
},
table: {
name:"aaa",
value:"111"
},
// table:[{
// name:"aaa",
// value:"111"
// },
// {
// name:"bbb",
// value:"222"
// }
// ],
},
created() {
},
methods: {
onSubmit(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
this.exportWord();
} else {
console.log("error submit!!");
return false;
}
});
},
exportWord() {
const _this = this
JSZipUtils.getBinaryContent('/static/word.docx', function(error, content) {
// 抛出异常
if (error) {
throw error
}
// 创建一个JSZip实例，内容为模板的内容
let zip = new JSZip(content)
// 创建并加载docxtemplater实例对象
let doc = new Docxtemplater().loadZip(zip)
// 设置模板变量的值
// doc.setData(
// _this.form,
// _this.table
// )
doc.setData({
..._this.form,
..._this.table
})
try {
// 用模板变量的值替换所有模板变量
doc.render()
} catch (error) {
// 抛出异常
// let e = {
// message: error.message,
// name: error.name,
// stack: error.stack,
// properties: error.properties,
// }
this.$message.error('导出报表失败')
throw error
}
// 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
let out = doc.getZip().generate({
type: 'blob',
mimeType:
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
})
// 将目标文件对象保存为目标类型的文件，并命名
saveAs(out, '宁夏回族自治区旧伤复发就医确认表.docx')
})
},
}
};
</script>
<style scoped lang="less">
</style>第二：导出Excel数据表
1.准备下载和引入插件
npm install xlsx --save
或
yarn add xlsx --save
1.1引入xlsx插件
import XLSX from 'xlsx';
import XLSX from 'xlsx';import { Excel } from 'ant-design-vue';import 'xlsx/dist/xlsx.core.min.js';
1.2注册组件：
export default {components: {XLSX,},
2.使用：准备表头，准备Excel data数据源
3.获取表头部分后，自定义对应表头table的data数据（需要一个一个自定义准备数据源）
3.1获取表格表头：
const headers = this.jscolumns.map(col => col.title); // 获取列标题3.2准备表格data数据源：
const data = this.jsdataSource.map((item,index) => [ Number(index)+Number(1),item.akb020, item.akb021,ckc126,item.akc190,item.akc191,item.aab034,item.aac003,test(item.aac004),item.aac001,item.aae135,item.aka130,_publicDicTrans("AAB192",item.aab192),item.bkc192,item.bkc194,item.ake010,item.akc197,item.akc198,item.akf002,item.akc264,item.ake300,item.ake301,item.ake305])3.3表头和表格数据源结合：
const worksheet = XLSX.utils.aoa_to_sheet([headers, ...data])
3.4代码展示：
3.5导出excel效果：
4.完整代码
查看代码
<a-button type="primary" :loading="loading" @click="deriveExcelData" style="margin-left: 10px;"> 导出 </a-button>
import XLSX from 'xlsx';
import { Excel } from 'ant-design-vue';
import 'xlsx/dist/xlsx.core.min.js';
export default {
components: {
XLSX,
},
deriveExcelData(){
// 创建工作表
// const worksheet = XLSX.utils.json_to_sheet(this.jsdataSource);
// const workbook = XLSX.utils.book_new();
// XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
// const excelData = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
// const excelFile = new Blob([excelData], { type: 'application/octet-stream' });
// const link = document.createElement('a');
// link.href = URL.createObjectURL(excelFile);
// link.download = '导出查询结果.xlsx'; // 你可以设置下载文件的文件名
// link.click();
// 获取列标题
const headers = this.jscolumns.map(col => col.title); // 获取列标题
headers[0] = "序号";
// const ckc126=this.jsdataSource.aae100 == '0' ? '冲正' :this.jsdataSource.aae100 == '1' ? '结算' : '退费'
// ckc126 = this.jsdataSource.ckc126 == '0' ? '冲正' : this.jsdataSource.ckc126 == '1' ? '结算' : '退费';
let ckc126;
this.jsdataSource.map(item =>{
if(item.aae100 == '0'){
ckc126 = "冲正"
}else{
ckc126 = item.ckc126=="0"?"结算":"退费"
}
} )
// 判断性别
function test(item){
if (item == '2') {
return '女';
} else if (item== '1') {
return '男';
}
}
// 处理翻译支付地点
this.jsdataSource.forEach(item => {
return _publicDicTrans("AAB192",item.aab192)
})
// const data = this.jsdataSource.map(item => [ item.index,item.akb020, item.akb021,ckc126,item.akc190,item.akc191,item.aab034,item.aac003,item.aae135,item.aac001,item.aae135,item.aka130,item.aab192,item.bkc192,item.bkc194,item.ake010,item.akc197,item.akc198,item.akf002,item.akc264,item.ake300,item.ake301,item.ake305])
const data = this.jsdataSource.map((item,index) => [ Number(index)+Number(1),item.akb020, item.akb021,ckc126,item.akc190,item.akc191,item.aab034,item.aac003,test(item.aac004),item.aac001,item.aae135,item.aka130,_publicDicTrans("AAB192",item.aab192),item.bkc192,item.bkc194,item.ake010,item.akc197,item.akc198,item.akf002,item.akc264,item.ake300,item.ake301,item.ake305])
const worksheet = XLSX.utils.aoa_to_sheet([headers, ...data])
const workbook = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
XLSX.writeFile(workbook, '导出查询结果.xlsx')
},4. 预览-下载PDF附件内容
4.1HTML部分
查看代码
<div id="custom-border-layout-footer-title">查询结果
<a-button type="primary" style="margin-left: 10px" @click="getRdsPdf()" v-if="$route.query.type">查询明细</a-button>
</div>
<!--<div > <a-button type="primary">查询明细</a-button></div>-->
<a-table
class="customTableClass"
:scroll="{
x: '100%',
y: `500px`,
scrollToFirstRowOnChange: true,
}"
:columns="hsbzColumns"
rowKey="akc190"
:loading="loading"
:data-source="dataSource"
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
type: 'checkbox',
hideDefaultSelections: true,
columnWidth: 30,
}"
:pagination="{
defaultPageSize: 10,
showTotal: total => `共 ${total} 条`,
showQuickJumper:true,
showSizeChanger:true,
}"
>
</a-table>4.1.1 弹出框Modal 显示PDF附件区域
<!--展示PDF附件-->
<a-modal v-model="showrdsModal" width="750px" :footer="null">
<div slot="title">
<div id="custom-border-layout-header" style="padding: 0">
<div id="custom-border-layout-header-title">费用审核明细</div>
</div>
</div>
<iframe
:src="pdfSrc"
style="height: 700px; width: 700px"
frameborder="0"
scrolling="auto"
sandbox="allow-same-origin allow-top-navigation allow-forms allow-scripts allow-modals allow-downloads"
></iframe>
</a-modal>4.2 data里控制Modal弹出框
showrdsModal: false, //展示PDF附件Modal
4.3 方法和实现
methods: {
// 展示PDF附件ID
getRdsPdf(){
this.loading = true
let params = {
methodName: "getFile",
serviceName: "downloadService",
params: [
{
// paramValue:
// this.addressParams.store_addressParams_bad002 ||
// this.addressParams.store_addressParams_aaz002,
paramValue:'2024012600000316',
paramType: "String",
paramIndex: "0",
}
]
}
protocolManagement(params)
.then(res => {
this.loading = false
this.showrdsModal = true
if (res.code != 0) this.$message.error(res.message)
else {
this.aaa726Id = res.data[0].aaa726
// this.base64Id = res.data[0].base64
this.showPdfShow(res.data[0].base64)
}
})
},
showPdfShow(bstr) {
let cstr = window.atob(bstr)
let n = cstr.length
try {
let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = cstr.charCodeAt(n)
}
let blob = new Blob([u8arr], {
type: "application/pdf;chartset=UTF-8",
})
const fileURL = window.URL.createObjectURL(blob)
let prefix = process.env.NODE_ENV === "production" ? "/hrss-gsjs" : ""
this.pdfSrc =
prefix + "/static/web/viewer.html?file=" + window.encodeURIComponent(fileURL)
} catch (error) {
console.log(error)
}
},
