记录纯前端导出docx文档

这种方式的导出只针对图片格式为png，jpg的图片导出形式

-- 安装 docxtemplater
cnpm install docxtemplater pizzip  --save

-- 安装 jszip-utils
cnpm install jszip-utils --save 

-- 安装 jszip
cnpm install jszip --save

-- 安装 FileSaver
cnpm install file-saver --save

--安装lodash
cnpm install lodash --save

import JSZipUtils from 'jszip-utils'
import JSZip from 'pizzip'
import Docxtemplater from 'docxtemplater'
import { saveAs } from 'file-saver'
import ImageModule from "docxtemplater-image-module-free"
import expressions from 'angular-expressions'
import merge from "lodash/merge"

export function exportWordAndImage(wordData,template,outputFilename){
  JSZipUtils.getBinaryContent('/errpweb/'+template, function (error, content) {
    if (error) {
      console.error(error);
      return;
    }
    var opts = {}
    opts.centered = false;
    opts.getImage = function (tagValue, tagName) {
      return new Promise(function (resolve, reject) {
        JSZipUtils.getBinaryContent(tagValue, function (error, content) {
          if (error) {
            return reject(error);
          }
          return resolve(content);
        });
      });
    }
    //图片有关代码，没有图片的可以删除
    opts.getSize = function (img, tagValue, tagName) {
      // FOR FIXED SIZE IMAGE :
      return [256, 168];//图片大小 （这个可以写成动态的，开发文档上有）
      return new Promise(function (resolve, reject) {
        var image = new Image();
        image.src = url;
        image.onload = function () {
          resolve([image.width, image.height]);
        };
        image.onerror = function (e) {
          console.log('img, tagValue, tagName : ', img, tagValue, tagName);
          reject(e);
        }
      });
    }
    //角度筛选器 （可以在word中进行一些复杂的 运算，不需要的这部分可以删除）
    var  angularParser= function(tag){
      if (tag === '.') {
        return {
          get: function(s){ return s;}
        };
      }
      const expr = expressions.compile(
        tag.replace(/(’|‘)/g, "'").replace(/(“|”)/g, '"')
      );
      return {
        get: function(scope, context) {
          let obj = {};
          const scopeList = context.scopeList;
          const num = context.num;
          for (let i = 0, len = num + 1; i < len; i++) {
            obj = merge(obj, scopeList[i]);
          }
          return expr(scope, obj);
        }
      };
    }
    var imageModule = new ImageModule(opts);

    var zip = new JSZip(content);
    var doc = new Docxtemplater()
      .loadZip(zip)
      .setOptions({parser:angularParser})
      .attachModule(imageModule)
      .compile();

    doc.resolveData(wordData).then(function () {
      doc.render();
      var out = doc.getZip().generate({
        type: "blob",
        mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
      });
      //输出文档
      saveAs(out, outputFilename+".docx");
    })
  });
}

docxtemplater官网：(https://docxtemplater.readthedocs.io/en/latest/index.html)