vue3 echarts docxtemplater 导出文本及图片。

直接上代码，不说那么多。


单独的vue页面 直接能点击显示跟导出。  

现在还有一个问题是导出的文件使用offic word打不开，不晓得为什么，用wps 和 金山文档 腾讯文档都能看到结果。

<template>
  <div>
    <el-button @click="queryData">显示</el-button>
    <el-button @click="daochu">导出</el-button>
    <div id="bingtudiv" style="width: 600px;height:400px;"></div>
    <div id="zhuzhuagntudiv" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
import Docxtemplater from 'docxtemplater'
import JSZipUtils from 'jszip-utils'
import JSZip from 'pizzip'
import {saveAs} from 'file-saver'
import ImageModule from 'docxtemplater-image-module-free'
import * as echarts from 'echarts'

var bingtu
var zhuzhuangtu
var bingtushuju = {
  series: [
    {
      name: '访问来源',
      type: 'pie',    // 设置图表类型为饼图
      radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
      data: [          // 数据数组，name 为数据项名称，value 为数据项值
        {value: 235, name: '视频广告'},
        {value: 274, name: '联盟广告'},
        {value: 310, name: '邮件营销'},
        {value: 335, name: '直接访问'},
        {value: 400, name: '搜索引擎'}
      ]
    }
  ]
};
var zhuzhuagntushuju = {
  title: {
    text: '第一个 ECharts 实例'
  },
  tooltip: {},
  legend: {
    data: ['销量']
  },
  xAxis: {
    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
  },
  yAxis: {},
  series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
  }]
};
// 转换成buffer
const base64DataURLToArrayBuffer = function (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;
}


export default {
  mounted() {

  },
  data() {
    return {};
  },
  methods: {
    queryData() {
      bingtu = echarts.init(document.getElementById('bingtudiv'));
      bingtu.setOption(bingtushuju)
      zhuzhuangtu = echarts.init(document.getElementById('zhuzhuagntudiv'));
      zhuzhuangtu.setOption(zhuzhuagntushuju)
    },
    daochu() {
      JSZipUtils.getBinaryContent('/zhoubao.docx', function (error, content) {
        // 抛出异常
        if (error) {
          throw error
        }
        const opts = {
          centered: false,
          fileType: 'docx'
        }
        opts.getImage = function (tagValue) {
          if (tagValue.size && tagValue.data) {
            return base64DataURLToArrayBuffer(tagValue.data);
          }
          return base64DataURLToArrayBuffer(tagValue);
        };
        opts.getSize = function (_, tagValue) {
          if (tagValue.size && tagValue.data) {
            return tagValue.size;
          }
          return [560, 280];
        };
        // 创建一个JSZip实例，内容为模板的内容
        const zip = new JSZip(content)
        // 创建并加载docxtemplater实例对象
        const doc = new Docxtemplater().loadZip(zip)
        doc.setOptions({
          nullGetter: function () { //设置空值 undefined 为''
            return '';
          },
        });
        // 设置图片模块
        doc.attachModule(new ImageModule(opts));
        // 设置模板变量的值
        doc.setData({
          bingtutag: bingtu.getDataURL({
            pixelRatio: 5, //导出的图片分辨率比率,默认是1
            backgroundColor: '#fff', //图表背景色
            excludeComponents: ['toolbox'], //忽略组件的列表
            type: 'png', //图片类型支持png和jpeg
          }),
          zhuzhuangtutag: zhuzhuangtu.getDataURL({
            pixelRatio: 5, //导出的图片分辨率比率,默认是1
            backgroundColor: '#fff', //图表背景色
            excludeComponents: ['toolbox'], //忽略组件的列表
            type: 'png', //图片类型支持png和jpeg
          })
        })
        try {
          // 用模板变量的值替换所有模板变量
          doc.render()
        } catch (error) {
          console.error('导出报表失败')
          throw error
        }
        // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
        const out = doc.getZip().generate({
          type: 'blob',
          mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
        })
        // 将目标文件对象保存为目标类型的文件，并命名
        saveAs(out, `周报.docx`)
      })
    }
  }
}
</script>

<style lang="less">
</style>

因为word文档有时候如果字符写的不对也显示不出来。

｛%%bingzhuagntutag｝

{%%zhuzhuangtutag}

注意第一行用的是中文字符大括号。，显示不出来。第二行可以正常显示。