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')
      })
    },
相关推荐
0思必得06 分钟前
[Web自动化] Selenium处理iframe和frame
前端·爬虫·python·selenium·自动化·web自动化
计算机毕设VX:Fegn089533 分钟前
计算机毕业设计|基于springboot + vue蛋糕店管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
行走的陀螺仪2 小时前
uni-app + Vue3编辑页/新增页面给列表页传参
前端·vue.js·uni-app
We་ct3 小时前
LeetCode 205. 同构字符串:解题思路+代码优化全解析
前端·算法·leetcode·typescript
2301_812731413 小时前
CSS3笔记
前端·笔记·css3
ziblog3 小时前
CSS3白云飘动动画特效
前端·css·css3
越努力越幸运5083 小时前
CSS3学习之网格布局grid
前端·学习·css3
半斤鸡胗4 小时前
css3基础
前端·css
ziblog4 小时前
CSS3创意精美页面过渡动画效果
前端·css·css3
akangznl4 小时前
第四章 初识css3
前端·css·css3·html5