GitLab

使用本地模板和数据导出word文档。使用默认大小的图片

创建一个word文件写入如下内容

{time1}
{time2}
{%image1}

将模板文件放在public文件夹
写一个按钮调用导出方法。数据来源自行处理

例如：

<template>
  <div>
    <button @click="exportDocx">Test</button>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import WordExportUtils from '@/utils/WordExportUtils'

export default {

  data() {
    return {
      data: {
        time1: '2022 年 6 月 1 日-2022 年 6 月 30 日',
        time2: '二零二二年七月一日',
        image1: null
      }
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      let element = document.createElement('div')
      element.style.width = "577px";
      element.style.height = "201px";
      let myChart = echarts.init(element);
      // 绘制图表
      myChart.setOption({
        animation:false,
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      });
      this.data.image1 = myChart.getDataURL();
    },
    exportDocx(){
      WordExportUtils.exportDocxFromFileWithDefaultImageSize("report1.docx",this.data,"导出文件.docx")
    }
  }
}
</script>