vue前端实现导出页面为word 页面里面有多个表格 vxe-table

Vue前端要实现将包含多个VxeTable的页面导出为Word文档，可以借助一些第三方库，比如`xlsx`用于处理Excel数据格式，然后通过插件如`html-to-docx`转换HTML内容为Word文档。以下是一个简单的步骤概述：

1. 安装依赖：首先需要安装`vue-xlsx`、`html2canvas`以及`docx`相关的库，例如：

   npm install vue-xlsx html2canvas jszip docx-renderer --save-dev

2. 引入并配置：在项目中引入并注册这些组件，并设置相应的配置。

3. 使用v-html渲染表格：由于VxeTable本身不直接支持导出，你可以先将每个表格的内容转化为HTML字符串，以便于后续导出。

<template>
  <div>
    <vxe-table :data="tableData" :methods="exportToWordMethod"></vxe-table>
  </div>
</template>

<script>
import { html2canvas } from 'html2canvas';
import XLSX from 'xlsx';

export default {
  data() {
    return {
      tableData: ... // 表格数据
    };
  },
  methods: {
    exportToWordMethod() {
      let tables = document.querySelectorAll('vxe-table tbody tr'); // 获取所有表格

      Promise.all(tables.map((table) => {
        return html2canvas(table).then((canvas) => {
          const imgBase64 = canvas.toDataURL('image/png');
          const imgBlob = atob(imgBase64.substring(imgBase64.indexOf(',') + 1));
          const imgArrayBuffer = new Uint8Array(imgBlob.length);
          for (let i = 0; i < imgBlob.length; i++) {
            imgArrayBuffer[i] = imgBlob.charCodeAt(i);
          }
          return XLSX.utils图片转base64(imgArrayBuffer);
        });
      })).then((tableBlobs) => {
        const workbook = XLSX.utils.book_new();
        const worksheet = XLSX.utils.aoa_to_sheet([[...tableBlobs]]);
        XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
        const wbOut = XLSX.write(workbook, { type: 'buffer', bookType: 'xlsx' });
        this.downloadDocx(wbOut);
      });
    },
    
    downloadDocx(buffer) {
      const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
      saveAs(blob, 'output.docx');
    },
  },
};
</script>