步驟一：安裝依賴

安裝依賴：npm install --save xlsx file-saver

?

步驟二：在放置需要導(dǎo)出功能的組件中引入相關(guān)組件

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

步驟三：給table設(shè)置一個id

HTML中的設(shè)置，簡單來說就是給需要導(dǎo)出的table標(biāo)簽el-table上加一個id：如exportTable，對應(yīng)下面的exportExcel方法中的 document.querySelector('#exportTable')?

步驟四：寫method

在methods中設(shè)置真正實現(xiàn)導(dǎo)出轉(zhuǎn)換excel表格的方法:

exportExcel () {/* generate workbook object from table */var xlsxParam = { raw: true } // 導(dǎo)出的內(nèi)容只做解析，不進行格式轉(zhuǎn)換var wb = XLSX.utils.table_to_book(document.querySelector('#exportTab'), xlsxParam)/* 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' }), 'fileName.xlsx')} catch (e) {if (typeof console !== 'undefined') {console.log(e, wbout)}}return wbout }

注意：

• 在表格中的數(shù)字為百分比或者是其他的，在到處的時候會進行處理變成小數(shù)，或者科學(xué)計數(shù)法，這個就需要集啊讓xlsxParam這個字段，讓導(dǎo)出不做格式轉(zhuǎn)換，這樣就能夠你的table中是什么，導(dǎo)出就是什么
• 可以導(dǎo)出表格的，但有個問題是導(dǎo)出的數(shù)據(jù)是重復(fù)的，這個是因為你的表格有列使用了fixed屬性，element-ui的table使用了fixed屬性固定列，導(dǎo)出表格時會出現(xiàn)導(dǎo)出兩次的問題，是因為在table中有兩個table標(biāo)簽，我們可以通過代碼解決這個問題，注意代碼中拷貝了一個table元素，否則直接刪除會刪除頁面中的表格

這個時候我們可以改良一下我們的代碼：?

exportExcel () {/* generate workbook object from table */var xlsxParam = { raw: true } // 導(dǎo)出的內(nèi)容只做解析，不進行格式轉(zhuǎn)換var table = document.querySelector('#exportTab').cloneNode(true)table.removeChild(table.querySelector('.el-table__fixed')) //這里是雙下劃線var wb = XLSX.utils.table_to_book(table, xlsxParam)/* 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' }), 'fileName.xlsx')} catch (e) {if (typeof console !== 'undefined') {console.log(e, wbout)}}return wbout }

?

?這個時候我們在點擊下載，就能夠正常實現(xiàn)功能了

?

?

抓緊試一下吧~~~~~

?

?

?

?

?

?

　　

轉(zhuǎn)載于:https://www.cnblogs.com/charles8866/p/11303397.html

總結(jié)

以上是生活随笔為你收集整理的vue---EleElement UI 表格导出功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。