vue导出word文档

首先安装相应插件

npm i docxtemplater

npm i pizzip

npm i jszip-utils

npm i file-saver

创建一个js文件

tempDocxPath 是word模板 例如 “/xxxx.docx”

fillname 原本是作为导出的word的名字变量的后来作废了，写在了data里面

import docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import {saveAs} from 'file-saver'

export const exportDocx = (tempDocxPath,data) => {
  // 点击导出word
  // 读取并获得模板文件的二进制内容
  JSZipUtils.getBinaryContent(tempDocxPath,(error, content) => {
      // 抛出异常
      if (error) {
          throw error;
      }

      // 创建一个PizZip实例，内容为模板的内容
      let zip = new PizZip(content);
      // 创建并加载docxtemplater实例对象
      let doc = new docxtemplater();
      doc.loadZip(zip);

      // 设置模板变量的值
      doc.setData(data);
      try {
          // 用模板变量的值替换所有模板变量
          doc.render();
      } catch (error) {
        console.log(error);
          // 抛出异常
          let e = {
              message: error.message,
              name: error.name,
              stack: error.stack,
              properties: error.properties
          };
          throw error;
      }
      
      // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
      let out = doc.getZip().generate({
          type: "blob",
          mimeType:"application/vnd.openxmlformats-officedocument.wordprocessingml.document"
      });
      // 将目标文件对象保存为目标类型的文件，并命名
      saveAs(out,data.fillname + ".docx");
  });
}

WORD模板

word模板放在public文件下

data 为对象

data: {

        name: name,

        sex: sex,

        shuzu: [ {age : 18}, {age : 20}]

}

table为数组多个数据，table为自定名称，数组书写为

{#xxx} 内容  {/xxx}

数组每一行数据写完会换行

对象里面的数据直接写  {名称}  即可

导出word方法页面

引入方法

import {exportDocx} from 路径

exportDocx ( ' /文件名.docx ' ,  data)

导出word的名称可以动态写出在data里，也可以在外面单出穿个变量，看自己的喜好