前端导出word图片

1. 从后端获取文件流，转化成arraybuffer格式

axios
       .post(
            '/api/vue/vueEquipmentDetails/devicePic',
            params,
            {
              responseType: 'arraybuffer'
            }
          )
          .then(response => {
            this.img1='data:image/png;base64,'+this.ArrayBufferToBase64(response.data)//文件流转arraybuffer，arraybuffer转base64
            console.log(this.img1)
          })

ArrayBufferToBase64(buffer) {
        //第一步，将ArrayBuffer转为二进制字符串
        var binary = '';
        var bytes = new Uint8Array(buffer);
        for (var len = bytes.byteLength, i = 0; i < len; i++) {
          binary += String.fromCharCode(bytes[i]);
        }
        //将二进制字符串转为base64字符串
        return window.btoa(binary);
      },

2. 调用导出方法

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

exportWord(){
        var ImageModule = require('open-docxtemplater-image-module');
        // 点击导出word
        let _this = this;
        let _that = this;
        // 读取并获得模板文件的二进制内容
        JSZipUtils.getBinaryContent("/demo.docx",function(error, content) {
          // exportTemplate.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
          // 抛出异常
          if (error) {
            throw error;
          }

          // 图片处理
          let opts = {}
          opts.centered = true;  // 图片居中，在word模板中定义方式为{%%image}
          opts.fileType = "docx";
          opts.getImage = function(chartId){
            console.log(chartId)
            return _this.base64DataURLToArrayBuffer(chartId);
          }
          opts.getSize = function(){
            return [60,30]
          }
          let imageModule = new ImageModule(opts);
          // 创建一个PizZip实例，内容为模板的内容
          let zip = new PizZip(content);
          // 创建并加载docxtemplater实例对象
          let doc = new docxtemplater();
          doc.attachModule(imageModule);
          doc.loadZip(zip);

          // 设置模板变量的值
          doc.setData({
            image:_this.img1
          });

          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"
          });
          // 将目标文件对象保存为目标类型的文件，并命名
          saveAs(out, "word文档名称.docx");
        });
      },

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;
      },