關於 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: '\r\n', // 允許您定義行分隔符。
        rowHeaders: true // 允許您使用行標題導出數據。
      })
    }
  },

　　頁面調用：

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

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

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