关于 vue 使用 Handsontable 表格数据导出

官方文档：

const container = document.getElementById('example');
const hot = new Handsontable(container, {
  data: getData()
});

// access to exportFile plugin instance
const exportPlugin = hot.getPlugin('exportFile');

// export as a string
exportPlugin.exportAsString('csv');

// export as a blob object
exportPlugin.exportAsBlob('csv');

// export to downloadable file (named: MyFile.csv)
exportPlugin.downloadFile('csv', {filename: 'MyFile'});

// export as a string (with specified data range):
exportPlugin.exportAsString('csv', {
  exportHiddenRows: true,     // default false
  exportHiddenColumns: true,  // default false
  columnHeaders: true,        // default false
  rowHeaders: true,           // default false
  columnDelimiter: ';',       // default ','
  range: [1, 1, 6, 6]         // [startRow, endRow, startColumn, endColumn]
});

　　自己改造了一下：

 
// 标签
<hot-table
      :data="datas" licenseKey="non-commercial-and-evaluation"
      :width="width"
      :height="height"
      :rowHeights="rowHeights"
      :colWidths="colWidths"
      :manualRowMove="manualRowMove"
      :className="className"
      :colHeaders="colHeaders"
      :rowHeaders="rowHeaders"
      :readOnly="readOnly"
      :fixedRowsBottom="fixedRowsBottom"
      :mergeCells="tableMerges"
      ref="container"
      :observeChanges="observeChanges"
    ></hot-table>

// 表格导出 methods 方法

 exportHandsontable () {
      console.log('导出')
      const container = this.$refs.container.hotInstance
      const hot = Object.assign(container, {
        data: this.datas, // 导出数据
        colHeaders: true,
        rowHeaders: true
      })
      console.log('s', hot)
      // access to exportFile plugin instance
      const exportPlugin = hot.getPlugin('exportFile')
      console.log('exportPlugin', exportPlugin)
      exportPlugin.downloadFile('csv', {
        bom: 'UTF-8', // 允许您使用BOM签名导出数据。
        columnDelimiter: ',', // 允许您定义列分隔符。
        columnHeaders: false, // 允许使用列标题导出数据。
        exportHiddenColumns: true, // 允许您从隐藏列导出数据。
        exportHiddenRows: true, // 允许您从隐藏行导出数据
        fileExtension: 'csv', // 允许您定义文件扩展名。
        filename: '周排班基础信息[YYYY]-[MM]-[DD]', // 允许您定义文件名。
        mimeType: 'text/csv', // 允许您定义MIME类型。
        rowDelimiter: '
', // 允许您定义行分隔符。
        rowHeaders: true // 允许您使用行标题导出数据。
      })
    }
  },

　　页面调用：

<Button type="info"  @click="exportData">导出</Button>

import MonthDuty from '_c/onduty' // 引入组件

// 导出表格  methods方法里
    exportData () {
      this.$refs['MonthDuty'].exportHandsontable()
    },