首先需要先装依赖:

//-- 安装 docxtemplater
npm install docxtemplater pizzip  --save
npm install docxtemplater@3.5
//
docxtemplater@3.5 不然会报错 part..什么的
//-- 安装 jszip-utils
npm install jszip-utils --save 
//-- 安装 jszip
npm install jszip --save
//-- 安装 FileSaver
npm install file-saver --save
//安装 docxtemplater-image-module-free
npm install --save docxtemplater-image-module-free 

export(){
      var ImageModule = require('open-docxtemplater-image-module');
      let that=this
      JSZipUtils.getBinaryContent("../../../static/template/模板表.docx", function (error, content) {
        // model.docx是模板。我们在导出的时候,会根据此模板来导出对应的数据
        // 抛出异常
        if (error) {
          throw error;
        }
        // 创建并加载docxtemplater实例对象
        const doc = new docxtemplater();
        // 创建一个PizZip实例,内容为模板的内容
        const zip = new PizZip(content);
        doc.loadZip(zip)
        // 图片处理
        const opts = {}
        opts.centered = true;  // 图片居中,在word模板中定义方式为{%image}
        opts.fileType = "docx";
        opts.getImage = (chartId) =>{
          return that.base64DataURLToArrayBuffer(chartId);
        }
        opts.getSize = function(){
          return [600,900]
        }
        let imageModule = new ImageModule(opts);
        doc.attachModule(imageModule);
        // 设置模板变量的值,我的是一条数据里有多个图片,因此需要split一下。看个人情况写就行。主要就是把图片地址去转成base64后,在存给src
        if (that.ajmlList.length > 0) {
          for (let i = 0; i < that.ajmlList.length; i++) {
            if(!_.isEmpty(that.ajmlList[i].filePath)){
              let arr=that.ajmlList[i].filePath.split(',')
              for (let j = 0; j < arr.length; j++) {
                that.UrlToBase64(arr[j], (dataURL) => {
                  that.dataUrl.push({
                    src: dataURL
                  })
                })
              }
            }
          }
        }
//因为我转base64的时候是异步的,这只能设置一下等待时间了~ setTimeout(()
=> { that.docxData = { buyUnit:that.obj.passinfo.buyUnit,//类似这样,与模板对应上 普通字段模板里就写{buyUnit} images: that.dataUrl //批量图片 模板里复杂一些 {#images} {%image} {/} }; doc.setData({ ...that.docxData }); 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.message})); throw error; } // 生成一个代表docxtemplater对象的zip文件(不是一个真实的文件,而是在内存中的表示) let out = doc.getZip().generate({ type: "blob", mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" }); // 将目标文件对象保存为目标类型的文件,并命名 saveAs(out, "测试.docx"); }, 4000); }); }
//带回调的办法   
 UrlToBase64(url, callback) {
      let  image= new Image();
      let that=this
      //解决跨域问题
      image.setAttribute('crossOrigin', 'anonymous');
      image.src = url
      image.onload = () => {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext('2d');
        context.drawImage(image, 0, 0, image.width, image.height);
        var quality = 0.8;
        //这里的dataurl就是base64类型
        var dataURL = canvas.toDataURL("image/png", quality);
        callback ? callback(dataURL) : null; //调用回调函数
      }

    },
//官网里的方法,没仔细看
base64DataURLToArrayBuffer(dataURL) {
const base64Regex = /^data:image\/(png|jpg|svg|svg\+xml);base64,/;
if (!base64Regex.test(dataURL)) {
return false;
}
const stringBase64 = dataURL.replace(base64Regex, "");
let binaryString;
if (typeof window !== "undefined") {
binaryString = window.atob(stringBase64);
} else {
binaryString = new Buffer(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;
},
 

官网链接:https://docxtemplater.com/