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')
      })
    },
相关推荐
雪芽蓝域zzs3 分钟前
新建前端pnpm(vue js ) 仿若依项目(一)
前端·javascript·vue.js
vipbic4 分钟前
网站升级了,我却有点舍不得
前端·vue.js·后端
IT_陈寒4 分钟前
Java Stream并行处理让我数据库崩了两次
前端·人工智能·后端
恋猫de小郭4 分钟前
Flutter 3.47 首坑,analysis_options 问题连环回归
android·前端·flutter
YWL25 分钟前
OpenLayers测距测面:完整测量工具
前端·javascript·vue.js·信息可视化·openlayers
zhanghaha131434 分钟前
HTML系列教程:2_HTML 编辑器(零基础超详细讲解
前端·编辑器·html
半旧51838 分钟前
【Java Web02】WEB服务器内部实现技术揭秘
java·服务器·前端
拿本唠嗑AI研究1 小时前
现代前端架构爬虫指南:从静态页面到 React/Vue 单页应用
前端·爬虫·架构
独孤九剑打醒他1 小时前
【原创开源】双层Master‑Worker软硬协同调度架构:从根源解决分布式数据一致性难题
前端·嵌入式硬件·架构·前端框架·硬件工程
程序员黑豆7 小时前
Java包装类:基本类型与对象的桥梁
java·前端·ai编程