关于 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() },