Vue+docxtemplater導出到word（包含批量轉出圖片）！！！

首先需要先裝依賴：

//-- 安裝 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/