Vue+elementUI导出word打印方式
更新时间:2025年04月09日 16:30:53 作者:沉默是金~
这篇文章主要介绍了Vue+elementUI导出word打印方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vue+elementUI导出word打印
import JSZipUtils from "jszip-utils"; import JSZip from "pizzip"; import Docxtemplater from "docxtemplater";
npm安装以上依赖
首先维护个word模板

导出方法
//导出word
skipOutWord(row) {
var printData = row
const data = JSON.parse(JSON.stringify(printData))
data.timeYear = data.startTime.toString().split("-")[0]
data.startTime = data.startTime.toString().split("-")[0]+'年'+data.startTime.toString().split("-")[1]+'月'
data.endTime = data.endTime.toString().split("-")[0]+'年'+data.endTime.toString().split("-")[1]+'月'
//set打印日期
JSZipUtils.getBinaryContent('/template/projectApplication.docx', function (error, content) {
// 抛出异常
if (error) {
throw error
}
// 创建一个JSZip实例,内容为模板的内容
const zip = new JSZip(content)
// 创建并加载docxtemplater实例对象
const doc = new Docxtemplater().loadZip(zip)
// 设置模板变量的值
doc.setData({
...data,
})
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文件(不是一个真实的文件,而是在内存中的表示)
const out = doc.getZip().generate({
type: 'blob',
mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
})
// 将目标文件对象保存为目标类型的文件,并命名
saveAs(out, '汕头公司'+printData.startTime.toString().split('-')[0] + '年职工(青年)创新创效立项申报表.docx')
})
},总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
前端XSS攻击场景详解与Vue.js处理XSS的方法(vue-xss)
这篇文章主要给大家介绍了关于前端XSS攻击场景与Vue.js使用vue-xss处理XSS的方法,介绍了实际工作中渲染数据时遇到XSS攻击时的防范措施,以及解决方案,需要的朋友可以参考下2024-02-02
vue按住shift键多选方式(以element框架的table为例)
这篇文章主要介绍了vue按住shift键多选方式(以element框架的table为例),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
springboot + vue+elementUI实现图片上传功能
文章描述了如何使用Element UI的el-upload组件实现前端图片上传,并将图片存储到后端数据库,同时在页面上回显上传的图片,后端通过接口接收图片,并将其存储在指定位置,然后返回图片路径以便在前端显示,本文给大家介绍的非常详细,感兴趣的朋友一起看看吧2025-01-01


最新评论