1.安装依赖

　　npm i docxtemplater -S
　　npm i docxtemplater-image-module -S
　　npm i pizzip -S
　　npm i jszip-utils -S
　　npm i file-saver -S

2.vue文件引入依赖

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

3.vue需要实现的方法
    export default {
        data() {
            let self = this;
            return {
                imageOpts: {
                    getImage(tagValue, tagName) { //获取base64格式图片
                        return self.base64DataURLToArrayBuffer(tagValue);
                    },
                    getSize(img, tagValue, tagName) { //返回图片大小，长*宽
                        return [60, 80];
                    }
                }
            }
        },
        methods: {
            //导出文件
            export2Word(v, t, name) { //v:图片路径,t:时间字符串,name:导出文件名称--变量需自己定制，此处为举例
                let self = this;
                JSZipUtils.getBinaryContent(
                    "***.docx", //需要导出的模板文件地址
                    function(error, content) {
                        if (error) {
                            throw error;
                        }
                        let zip = new PizZip(content);
                        let doc = new docxtemplater().loadZip(zip);
                        doc.attachModule(new ImageModule(self.imageOpts));
                        doc.setData({ //设置模板数据
                            imgsrc: v,
                            timestr: t
                        });
                        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;
                        }
                        let out = doc.getZip().generate({
                            type: "blob",
                            mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" //导出文件格式
                        });
                        saveAs(out, name + ".docx");
                    }
                );
            },
            //获取base64格式图片
            base64DataURLToArrayBuffer(dataURL) {
                const base64Regex = /^data:image\/(png|jpg|svg|svg);base64,/;
                if (!base64Regex.test(dataURL)) {
                    return false;
                }
                const stringBase64 = dataURL.replace(base64Regex, "");
                let binaryString;
                if (typeof window !== "undefined") {
                    binaryString = window.atob(stringBase64);
                } else {
                    binaryString = Buffer.from(stringBase64, "base64").toString("binary");
                }
                const len = binaryString.length;
                const bytes = new Uint8Array(len);
                for (let i = 0; i < len; i++) {
                    const ascii = binaryString.charCodeAt(i);
                    bytes[i] = ascii;
                }
                return bytes.buffer;
            }
        }
    }
4.导出文件
vue导出组件--docxtemplater应用，支持导出office文件_文件地址

 

 5.模板说明

　　{%img} 图片

　　{#list}{/list} 循环、if判断

　　{#list}{/list}{^list}{/list} if else 

　　{str} 文字