1, Installation dependency :npm install --save xlsx file-saver

2, It is introduced in the component where the export function is needed
import FileSaver from 'file-saver' import XLSX from 'xlsx'
3. export excel Table events
// Define export Excel Table events exportExcel() { let xlsxParam = { raw: true };
// convert to excel Time , Use the original format / generate workbook object from table /; /* Generating a workbook object from a table */ let
wb= XLSX.utils.table_to_book( document.querySelector("#projectTab"),
//elementui Form id xlsxParam ); /* Gets the binary string as the output */ var wbout = XLSX.write(wb, {
bookType: "xlsx", bookSST: true, type: "array" }); try { FileSaver.saveAs(
//Blob Object represents an immutable object , Class file object of raw data . //Blob Not necessarily JavaScript Data in native format . //File
Interface based on Blob, Inherited blob And extend it to support files on user's system . // Returns a newly created Blob object , Its content is composed of the array series given in the parameter . new
Blob([wbout], { type: "application/octet-stream" }), // Set export file name "sheetjs.xlsx" )
; } catch (e) { if (typeof console !== "undefined") console.log(e, wbout); }
return wbout; }
4. You may also encounter the following problems

( one ) If pagination exists , When exporting, only the current table Bound data , If we set the table Each page has only 10 Data , When exporting, only the 10 strip , Not all eligible data

reason : This plug-in exports only the current table All data in

terms of settlement : stay HTML Add another one to the code el-table label , this table Dedicated to exporting data , And this table It's always hidden , When the query condition changes , According to the total amount of all eligible data returned by the background total value , Then reset the parameters of the method to get background data , Pull all qualified data to bind in , This is the data you want to export .

( two ) On first export , Exported excel The table has only the header , No data content

resolvent : Export to excel Functions of tables exportExcel() Set a delay to execute , Because I didn't set the delay at first , After the data is pulled, it is directly assigned to the bound to table On exportData upper , And then it's called immediately exportExcel() cause , I guess exportData Render to table It will take some time , During this time, we immediately call exportExcel() Time , The data hasn't been rendered yet , here exportExcel() No data , Therefore, there is no data in the table exported for the first time

( three ) There are two copies of the exported data

reason : because element
ui Next el-table After being rendered, there are two table label , The purpose is to facilitate data interaction , So if el-column existence fixed Property , When exporting, there will be two copies of data

resolvent : I refer to the article of the big guy above , Hide directly table In el-table-column On fixed remove attribute , After all, this one table It's hidden , Remove it directly el-table-column On fixed The most convenient attribute

( four ) Exported excel form , If the number character is longer , In the export table, it will become the case of scientific counting

resolvent : Above exportExcel() Method , It has been explained
let xlsxParam = { raw: true }; // convert to excel Time , Use the original format /* Generating a workbook object from a table */ let wb =
XLSX.utils.table_to_book( document.querySelector("#projectTab"), //elementui
Form id xlsxParam );

©2019-2020 Toolsou All rights reserved,
It's unexpected Python Cherry tree (turtle The gorgeous style of Library )html Writing about cherry trees , Writing about cherry trees java Four functional interfaces ( a key , simple ) Browser kernel ( understand )06【 Interpretation according to the frame 】 Data range filtering -- awesome HashMap Explain in detail os Simple use of module computer network --- Basic concepts of computer network ( agreement , system ) Some East 14 Pay change 16 salary , Sincerity or routine ?