Shulou(Shulou.com)06/03 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.