关于 vue 使用 Handsontable 表格数据导出
官方文档:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | 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] }); |
自己改造了一下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | // 标签 <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><br> // 表格导出 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 // 允许您使用行标题导出数据。 }) } }, |
页面调用:
1 2 3 4 5 6 7 8 | <Button type= "info" @click= "exportData" >导出</Button> import MonthDuty from '_c/onduty' // 引入组件 // 导出表格 methods方法里 exportData () { this .$refs[ 'MonthDuty' ].exportHandsontable() }, |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步