2021-06-08vue前端生成毕业去向质量分析报告docx文档

实现思路

借助Word模板文档，通过替换模板数据的形式来填入毕业去向质量分析数据。

docx模板替换语法

简单字符串替换

在模板中的内容：我是 {var}。
在前端中定义： var:'123'
生成的docx文档中内容：我是123

数组替换

在模板中的内容：

{#table}
	{iterm}
{/table}

在前端中的定义：

table:[{term:'1'},{term:'2'},{term:'3'}]

生成的docx文档中内容：
1
2
3

代码实现（假设前端中定义的替换数据为form中的数据）

安装插件

在前端我们共需要4个插件，docxtemplater，jszip，jszip-utils和file-saver

npm install docxtemplater pizzip  --save    
npm install jszip@2.6.1 
npm install jszip-utils --save    
npm install file-saver --save       

1. docxtemplater是一种邮件合并工具，它以编程方式使用，处理条件、循环，并且可以扩展为表格、HTML、图像等。
2. jszip-utils是与jszip一起使用的跨浏览器的工具库。这里请千万下载@2.6.1版本的jszip，否则会报很多错误，难以解决。

	getBinaryContent()//读取并获得模板文件的二进制内容

3. jszip是一个用于创建、读取和编辑.zip文件的JavaScript库。
4. FileSaver.js 是在客户端保存文件的解决方案，非常适合需要生成文件，或者保存不应该发送到外部服务器的敏感信息的应用。
   参考博客：https://www.cnblogs.com/xhxdd/p/13716395.html

基本代码

引入插件库

import jszip from 'jszip'
import JSZipUtils from 'jszip-utils'
import docxtemplater from 'docxtemplater'
import FileSaver from 'file-saver'

outputDocx() {
      JSZipUtils.getBinaryContent("yyyy届就业质量报告.docx", (error, content) => {// yyyy届就业质量报告.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
        // 抛出异常
        if (error) {
          throw error
        }

        // 创建一个JSZip实例，内容为模板的内容
        let zip = new jszip(content);

        // 创建并加载docxtemplater实例对象
        let doc = new docxtemplater().loadZip(zip)

        // 设置模板变量的值，this.form为替换模板的数据
        doc.setData(this.form)

        try {
          // 用模板变量的值替换所有模板变量
          doc.render();
        } catch (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"
        });

        // 将目标文件对象保存为目标类型的文件，并命名
        FileSaver.saveAs(out, "xx大学xx学院" + this.form.year + "届就业质量报告.docx");

      });
    },

模板文件截图