前端导出word文档（基于vue）

工作中经常会遇到根据不同数据导出文档的情况，现在我们就来看一下基于 docxtemplater 来导出word文档的方法，使用起来非常便捷。

安装依赖的插件

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

下面简单介绍一下这几个插件的功能：

• docxtemplater：docxtemplate是一个从docx/pptx模板生成docx/pptx文档的库。语法包含变量替换、条件判断、循环、列表循环、表格循环等，还包括图片、html等模块转换。
• jszip-utils：jszip-utils是一个与 JSZip 一起使用的跨浏览器实用程序集合，详细可参考 官网网址中的文档。
• jszip： jszip是一个JavaScript类库，用来操作.zip文件的工具，详细可参考 官方网址 中的文档。
• file-saver：file-saver是在客户端保存文件的解决方案，非常适合需要生成文件或者保存不应该发送到外部服务器的敏感信息的应用，详细用法可参考 官方网址 中的文档。

创建exportFile.js（导出word方法）

1. 引入依赖包
2. 使用 jszip-utils 读取并获得模板文件的二进制内容
3. 使用 PizZip 创建实例，内容为模板的内容
4. 使用 docxtemplater 创建实例，并加载 PizZip 创建的实例
5. 使用docxtemplater 创建实例设置导出数据，并用导出数据的值替换所有模板变量
6. 生成一个代表docxtemplater对象的zip文件
7. 使用 saveAs 将生成的zip文件对象保存为目标类型的文件，并命名

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

/**
 * 导出word,支持图片
 * @param {Object} tempDocxPath 模板文件路径
 * @param {Object} wordData 导出数据
 * @param {Object} fileName 导出文件名
 */
export const exportWord = (tempDocxPath, wordData, fileName) => {
  // 读取并获得模板文件的二进制内容
  JSZipUtils.getBinaryContent(tempDocxPath, function (error, content) {
      if (error) {
        throw error;
      }

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

      doc.setData(wordData);

      try {
        // 用模板变量的值替换所有模板变量
        doc.render();
      } catch (error) {
        // 抛出异常
        const e = {
          message: error.message,
          name: error.name,
          stack: error.stack,
          properties: error.properties
        };
        console.log(
          JSON.stringify({
            error: e
          })
        );
        throw error;
      }

      // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
      const out = doc.getZip().generate({
        type: 'blob',
        mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
      });
      // 将目标文件对象保存为目标类型的文件，并命名
      saveAs(out, fileName);
    }
  );
};

编写word文档模板，具体的写法可以参考 docxtemplater demo 上的例子

下面列出几中常见的 docxtemplater 语法

1. 替换
   js中的变量定义：

{title:'简介'}

word模板文件中语法：

{title}

2. 循环
   js中的变量定义：

{
     loop:[
         { name: "Windows", price: 100},
         { name: "Mac OSX", price: 200 },
         { name: "Ubuntu", price: 0 }
    ],
    userGreeting: (scope) => {
        return "The product is" + scope.name + ", price：" + scope.price;
    },
}

word模板文件中语法：

循环{#loop} 
    {name}, {price}
     // 匿名函数插槽用法
     {userGreeting}
{/loop}

3. 判断
   js中的变量定义：

{
    hasKitty: true,
    kitty: "Minie",
    hasDog: false,
    dog: "wangwang",
}

word模板文件中语法：

{#hasKitty}
    Cat’s name: {kitty}
{/hasKitty} 
{#hasDog}
    Dog’s name: {dog}
{/hasDog}

4. 图片
   js中的变量定义：

{
    //文件路径
    image: '/logo.png',
}

word模板文件中语法：

{%image}

在组件中调用exportFile.js方法

import { exportWord } from '@/util/exportFile.js';

/**
* 参数1：模板文档路径
* 参数2：字段参数
* 参数3：输出文档
*/
const obj={
    ...
}
exportWord('template.docx' ,obj, '导出文件名.docx');

在这里关于模板文件的路径 tempDocxPath 我们要着重说一下。
在使用的过程中应该有不少人会遇到这种报错：Can't find end of central directory : is this a zip file ?

那这到底是什么原因导致的呢？
获得模板文件的二进制内容的方法，JSZipUtils.getBinaryContent(path, option) 提供path和option两个参数。我们来看一下path，前端开发最首先想到的可能是绝对路径或者相对路径，你可能还会用到@这个符号作为根目录使用，但在这里你显然不能这么用。

1. 如果我们的模板文件为‘xxxx.docx’，那么我们的path应该为‘/xxxx.docx’。修改完这个地方之后，剩下的就是要知道你使用的vue-cli是版本2还是版本3。如果是2，则应该有一个static的文件夹，请见你的模板文件放入这个static文件夹中；如果是3，则有一个public文件夹，请将模板文件放入这个public文件夹中。
2. 如果经过上面的修改依然报错，那么你就要看一下你的项目是不是微应用项目或者在项目路径上做了什么处理，如果是的话你需要根据项目目录填写xxxx.docx真正的路径。