vue使用html-docx-js导出页面包含echarts

可以使用 `html-to-image` 将包含 Echarts 的页面转换成图片，然后将图片插入到 Word 文档中。下面是一个简单的示例代码：

首先，安装依赖：

npm install html-to-image html-docx-js

然后，在 Vue 组件中，引入 `html-to-image` 和 `html-docx-js`：

import htmlToImage from 'html-to-image';
import htmlDocx from 'html-docx-js';

在需要导出的 Vue 组件中，定义一个 `exportDocx` 方法：

methods: {
  exportDocx() {
    const chart = this.$refs.chart.$el; // 获取包含 Echarts 的元素
    htmlToImage.toPng(chart)
      .then((dataUrl) => {
        const docx = htmlDocx.asBlob(`<img src="${dataUrl}" />`); // 将图片插入到 Word 文档中
        saveAs(docx, 'chart.docx'); // 使用 FileSaver.js 下载文件
      });
  },
},

在模板中，添加一个按钮，调用 `exportDocx` 方法：

<template>
  <div>
    <div ref="chart">
      <!-- Echarts 图表的 HTML -->
    </div>
    <button @click="exportDocx">导出 Word 文档</button>
  </div>
</template>

当用户点击按钮时，`exportDocx` 方法会获取包含 Echarts 的元素，将其转化为图片，并将图片插入到 Word 文档中，最后下载 Word 文档。注意，这里使用了 `FileSaver.js` 库来下载文件，需要先安装该库：

npm install file-saver

然后在 Vue 组件中引入：

import { saveAs } from 'file-saver';