vue3+handsontable实现表格编辑导出

1、handsontable官网

https://handsontable.com/docs/#demo
https://www.npmjs.com/package/html-docx-js     // html转word
https://www.npmjs.com/package/file-saver  // 文件保存
https://www.npmjs.com/package/xlsx  

2、安装

npm install handsontable @handsontable/vue3
npm install file-saver --save
npm install html-docx-js --save
npm install xlsx --save

3、使用

<hot-table :settings="hotSettings" ref="hotTableComponent"></hot-table>

<script>
import { HotTable } from "@handsontable/vue3";
import { registerAllModules } from "handsontable/registry";
import "handsontable/languages/zh-CN"; //中文包
registerAllModules();

import * as XLSX from 'xlsx';
import htmlDocx from 'html-docx-js/dist/html-docx';
import saveAs from 'file-saver';

export default {
  components: {
    HotTable,
  },
  data() {
    return {
      hotSettings: {
        // data: [
        //   ["产品名称", null, "产品数据", null, null, "数据值", null],
        //   ["序号", "产品代号", "指标范围", "单位", "测量值", "设计值", "备注"],
        //   ["1", "0001", "1~1", "直径", "0.01", "0.001", "备注001"],
        //   ["2", "0002", "2~2", "压强", "0.02", "0.002", "备注002"],
        //   ["3", "0003", "3~3", "时间", "0.03", "0.003", "备注003"],
        //   ["4", "0004", "4~4", "高度", "0.04", "0.004", "备注004"],
        //   ["5", "0005", "5~5", "宽度", "0.05", "0.005", "备注005"],
        //   ["6", "0006", "6~6", "直径", "0.06", "0.006", "备注006"],
        //   ["7", "0007", "7~7", "时间", "0.07", "0.007"