vue2.0 + element UI el-table data export in Excel (multistage form suitable, no paging Edition)

1, the installation of dependencies

npm install --save xlsx file-saver

2, the introduction of components inside

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

3, assembly methods to write a method

   exportExcel () {
         /* generate workbook object from table */
         var wb = XLSX.utils.table_to_book(document.querySelector('#outTable'))
         /* 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 (into a table of DOM node), sheetjs.xlsx is the export name table can be modified!

Table 4. Code

<el-table   id=“outTable” :data="jqData" style="width: 100%" max-height="700" show-summary>
</el-table>

5. Click the Export button to add an event, do exportExcel () method

<el-button type="primary" @click="exportExcel()">导出</el-button>

　　

Using the code affixed to the item, used in the project is to form a multi-level header , the same applies

Father internal components

 

 

 

 Table 3 Component subassembly (multistage header form)