How elementui exports tables with data to xlsx and excel
What this article shares with you is about how elementui exports data to xlsx and excel. The editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.
1. The first step is to install the plugin
Npm install file-savernpm install xlsx
two。 The second step is to set the global situation in mian.js.
/ / Export excel form template import FileSaver from 'file-saver'import XLSX from' xlsx' Vue.prototype.$FileSaver in vue = FileSaver; / / set global Vue.prototype.$XLSX = XLSX; / / set global
3. The third step is using
Export export default {data () {return {tableData: [{date: "2016-05-02", name: "Wang Xiaohu", address: "1518 Lane, Jinshajiang Road, Putuo District, Shanghai",}, {date: "2016-05-04" Name: "Wang Xiaohu", address: "1517 Lane, Jinshajiang Road, Putuo District, Shanghai",}],} }, methods: {o () {let tables = document.getElementById ("ou"); let table_book = this.$XLSX.utils.table_to_book (tables); var table_write = this.$XLSX.write (table_book, {bookType: "xlsx", bookSST: true, type: "array",}) Try {this.$FileSaver.saveAs (new Blob ([table_write], {type: "application/octet-stream"}), "sheetjs.xlsx");} catch (e) {if (typeof console! = = "undefined") console.log (e, table_write);} return table_write;},}}
You can see that it has been exported
In practical work, it is reasonable to extract the export button separately so that it can be reused.
The above is the table of how elementui exports data to xlsx and excel. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.
