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!