vue项目根据word模版导出word文件

一、安装依赖

1.  
   //1、docxtemplater
2.  
    
3.  
   npm install docxtemplater pizzip -S
4.  
    
5.  
    
6.  
   //2、jszip-utils
7.  
    
8.  
   npm install jszip-utils -S
9.  
    
10.  
     
11.  
    //3、pizzip
12.  
     
13.  
    npm install pizzip -S
14.  
     
15.  
     
16.  
    //4、FileSaver
17.  
    npm install file-saver --save

二、创建word模版

也就是编辑一个word文档，文档中需要动态取值的地方用{变量}取值；表格数据可以进行循环，以{#数组变量名}开始，以{/数组变量名}结束，如果数组变量是字符串而非对象则{#table}{.}{/table}。图片以{%图片base64变量名}展示，{%%图片base64变量名}表示图片居中。word模版放在public下。

word模版占位符用法

三、导出方法

1.  
   //导入包
2.  
   import PizZip from 'pizzip'
3.  
   import docxtemplater from 'docxtemplater'
4.  
   import JSZipUtils from 'jszip-utils'
5.  
   import { saveAs } from 'file-saver'
6.  
    
7.  
   data() {
8.  
   return {
9.  
   form: {
10.  
    userName: "杰克",
11.  
    value: "666",
12.  
    },
13.  
    // 表格信息
14.  
    tableData: [],
15.  
    //图片
16.  
    img1: '',
17.  
    img2: ''
18.  
    };
19.  
    },
20.  
     
21.  
     
22.  
     
23.  
    methods:{
24.  
    // 导出echarts图片，格式转换，官方自带，不需要修改
25.  
    base64DataURLToArrayBuffer(dataURL) {
26.  
    const base64Regex = /^data:image\/(png|jpg|svg|svg\ xml);base64,/;
27.  
    if (!base64Regex.test(dataURL)) {
28.  
    return false;
29.  
    }
30.  
    const stringBase64 = dataURL.replace(base64Regex, "");
31.  
    let binaryString;
32.  
    if (typeof window !== "undefined") {
33.  
    binaryString = window.atob(stringBase64);
34.  
    } else {
35.  
    binaryString = new Buffer(stringBase64, "base64").toString("binary");
36.  
    }
37.  
    const len = binaryString.length;
38.  
    const bytes = new Uint8Array(len);
39.  
    for (let i = 0; i < len; i ) {
40.  
    const ascii = binaryString.charCodeAt(i);
41.  
    bytes[i] = ascii;
42.  
    }
43.  
    return bytes.buffer;
44.  
    },
45.  
    // 点击导出word
46.  
    exportWord() {
47.  
    //这里要引入处理图片的插件，下载docxtemplater后，引入的就在其中了
48.  
    var ImageModule = require('docxtemplater-image-module-free');
49.  
    var fs = require("fs");
50.  
    const expressions = require("angular-expressions");
51.  
     
52.  
    let _this = this;
53.  
     
54.  
    // 读取并获得模板文件的二进制内容，放在项目中即可（wordTemplate.docx是public文件下的word模版）
55.  
    JSZipUtils.getBinaryContent("wordTemplate.docx", function(error, content) {
56.  
    if (error) {
57.  
    throw error;
58.  
    };
59.  
     
60.  
    expressions.filters.size = function (input, width, height) {
61.  
    return {
62.  
    data: input,
63.  
    size: [width, height],
64.  
    };
65.  
    };
66.  
    function angularParser(tag) {
67.  
    const expr = expressions.compile(tag.replace(/’/g, "'"));
68.  
    return {
69.  
    get(scope) {
70.  
    return expr(scope);
71.  
    },
72.  
    };
73.  
    }
74.  
     
75.  
    // 图片处理
76.  
    let opts = {}
77.  
    opts = { centered: false };
78.  
    opts.getImage = (chartId)=> {
79.  
    return _this.base64DataURLToArrayBuffer(chartId);
80.  
    }
81.  
    opts.getSize = function(img, tagValue, tagName) {
82.  
    console.log(tagName)
83.  
    //自定义指定图像大小，此处可动态调试各别图片的大小
84.  
    if (tagName === "chartImg1") return [249,200];
85.  
    return [300,200];
86.  
    }
87.  
     
88.  
    // 创建一个PizZip实例，内容为模板的内容
89.  
    let zip = new PizZip(content);
90.  
    // 创建并加载docxtemplater实例对象
91.  
    let doc = new docxtemplater();
92.  
    // 去除未定义值所显示的undefined
93.  
    doc.setOptions({nullGetter: function() {
94.  
    return "";
95.  
    }});
96.  
    doc.attachModule(new ImageModule(opts));
97.  
    doc.loadZip(zip);
98.  
     
99.  
     
100.  
     // 设置模板变量的值（键是word模版中用的值，值是vue文件data中的变量）
101.  
     doc.setData({
102.  
     ..._this.form,
103.  
     table: _this.tableData,
104.  
     img1: _this.img1,
105.  
     img2: _this.img2
106.  
     });
107.  
      
108.  
     try {
109.  
     // 用模板变量的值替换所有模板变量
110.  
     doc.render();
111.  
     } catch (error) {
112.  
     // 抛出异常
113.  
     let e = {
114.  
     message: error.message,
115.  
     name: error.name,
116.  
     stack: error.stack,
117.  
     properties: error.properties
118.  
     };
119.  
     console.log(JSON.stringify({ error: e }));
120.  
     throw error;
121.  
     }
122.  
      
123.  
     // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
124.  
     let out = doc.getZip().generate({
125.  
     type: "blob",
126.  
     mimeType:"application/vnd.openxmlformats-officedocument.wordprocessingml.document"
127.  
     });
128.  
     // 将目标文件对象保存为目标类型的文件，并命名
129.  
     saveAs(out, "测试.docx");
130.  
     });
131.  
     },
132.  
     }

ECHARTS图表的图片并转为base64格式，在图表加载完成时

1.  
   this.img2 = myChart2.getDataURL({
2.  
   pixelRatio: 2, // 导出的图片分辨率比例，默认为 1。
3.  
   backgroundColor: '#fff' // 导出的图片背景色，默认使用 option 里的 backgroundColor
4.  
   });

如果是需要动态添加的背景图，可以直接将图片的base64码赋值给img1变量。

这篇好文章是转载于：学新通技术网