步驟一：安裝依賴

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

?

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

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

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

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

步驟四：寫method

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

exportExcel () {/* generate workbook object from table */var xlsxParam = { raw: true } // 導(dǎo)出的內(nèi)容只做解析，不進(jìn)行格式轉(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í)候會(huì)進(jìn)行處理變成小數(shù)，或者科學(xué)計(jì)數(shù)法，這個(gè)就需要集啊讓xlsxParam這個(gè)字段，讓導(dǎo)出不做格式轉(zhuǎn)換，這樣就能夠你的table中是什么，導(dǎo)出就是什么
• 可以導(dǎo)出表格的，但有個(gè)問(wèn)題是導(dǎo)出的數(shù)據(jù)是重復(fù)的，這個(gè)是因?yàn)槟愕谋砀裼辛惺褂昧薴ixed屬性，element-ui的table使用了fixed屬性固定列，導(dǎo)出表格時(shí)會(huì)出現(xiàn)導(dǎo)出兩次的問(wèn)題，是因?yàn)樵趖able中有兩個(gè)table標(biāo)簽，我們可以通過(guò)代碼解決這個(gè)問(wèn)題，注意代碼中拷貝了一個(gè)table元素，否則直接刪除會(huì)刪除頁(yè)面中的表格

這個(gè)時(shí)候我們可以改良一下我們的代碼：?

exportExcel () {/* generate workbook object from table */var xlsxParam = { raw: true } // 導(dǎo)出的內(nèi)容只做解析，不進(jìn)行格式轉(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 }

?

?這個(gè)時(shí)候我們?cè)邳c(diǎn)擊下載，就能夠正常實(shí)現(xiàn)功能了

?

?

抓緊試一下吧~~~~~

?

?

?

?

?

?

　　

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

總結(jié)

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

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