vue实现word导出功能

1. 安装依赖

   -- 安装 docxtemplater
   cnpm install docxtemplater pizzip  --save
   
   -- 安装 jszip-utils
   cnpm install jszip-utils --save 
   
   -- 安装 jszip
   cnpm install jszip --save
   
   -- 安装 FileSaver
   cnpm install file-saver --save

2. 引入依赖包

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

3. 创建word模板文件

   

4. 导出word文件

   downLoadWord(detailData) {
         let docxSrc = "/(模板文件名).docx";//模板文件的路径
         let docxName = "(导出文件名).docx";//导出文件的名字
         // 读取并获得模板文件的二进制内容
         JSZipUtils.getBinaryContent(docxSrc, function (error, content) {
           if (error) {
             console.log(JSON.stringify(error.message));
             return;
           }
           let zip = new PizZip(content);
           let doc = new docxtemplater().loadZip(zip);
           // 设置模板变量的值
           doc.setData({
             ...detailData,
             name: detailData.name,
             age: detailData.age,
             address: detailData.address,
           });
           try {
             // 用模板变量的值替换所有模板变量
             doc.render();
           } catch (error) {
             let e = {
               message: error.message,
               name: error.name,
               stack: error.stack,
               properties: error.properties,
             };
             console.log(
               JSON.stringify({
                 error: e,
               })
             );
             throw error;
           }
           // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
           let out = doc.getZip().generate({
             type: "blob",
             mimeType:
               "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
           });
           // 将目标文件对象保存为目标类型的文件，并命名
           saveAs(out, docxName);
         });
       }

5. 保存结果

注意：

1. 模板文件推荐放在静态目录文件下。
2. 使用vue-cli2的时候，放在static目录下，使用vue-cli3的时候，放在public目录下。