Home > Article > Web Front-end > How to export Excel from element UI
This time I will show you how to export Excel from element UI. What are the precautions when exporting Excel from element UI? Here is a practical case, let’s take a look.
1. Install related dependencies
Mainly two dependencies
npm install --save xlsx file-saver
If you want to see the use of the two plug-ins in detail, please go to github.
https://github.com/SheetJS/js-xlsx
https://github.com/eligrey/FileSaver.js
2. Introduce
import FileSaver from 'file-saver' import XLSX from 'xlsx'
into the component 3. Write a method in component methods
exportExcel () {
/* generate workbook object from table */
var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
/* get binary string as output */
var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
try {
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
} catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
return wbout
},
Note: XLSX.uitls.table_to_book (the DOM node of the table is placed), sheetjs.xlsx is the name of the exported table, which can be modified!
4. Click the export button to execute the exportExcel method.
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
##detailed explanation of the steps of vue-dplayer to implement hls playback
How does vue slot display the parent component in the child component and pass it
The above is the detailed content of How to export Excel from element UI. For more information, please follow other related articles on the PHP Chinese website!