vue导出word文档docxtemplater，包括图片输出和角度筛选器

首先需要引入一些包

import docxtemplater from ‘docxtemplater’ //word文档生成
import JSZipUtils from ‘jszip-utils’
import PizZip from ‘pizzip’
import {saveAs} from ‘file-saver’ //输出文件流
import ImageModule from ‘docxtemplater-image-module-free’ //图片有关的

import expressions from ‘angular-expressions’ //角度筛选器有关
import merge from “lodash/merge” //角度筛选器有关

参考地址

docxtemplater 开发地址参考
https://docxtemplater.com/demo/#simple

word模板书写

var wordData={
name:‘张三’，imagePath：‘xxxxx’,showImage:true,
item:{age:12,sex:‘男’}，item2:[{name:’’},{name:’’}]
}

文档中这样写

{name}
{#item.age}
//图片
{%imagePath}
//循环
{#item2}
{name}
{/item2}

请参考 https://docxtemplater.com/demo/#simple

主要代码

```javascript
<script>
  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'

  import expressions from 'angular-expressions'  //
  import merge from "lodash/merge"    //
  export default {
    methods:{

      /**
       * 可以导出图片的方法 浏览器导出
       * @param wordData  数据{}
       * @param template  模板位置
       * @param outputFilename  输出名
       */
      exportWordAndImage(wordData,template,outputFilename){
        var ImageModule = require('docxtemplater-image-module-free');
        var docxtemplater = require('docxtemplater');
        var _that=this;
        JSZipUtils.getBinaryContent('../../../static/'+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 [470, 210];//图片大小 （这个可以写成动态的，开发文档上有）
            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 PizZip(content);
          var doc = new docxtemplater()
            .loadZip(zip)
            .setOptions({parser:angularParser})
            .attachModule(imageModule)
            .compile();

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