當(dāng)前位置:
首頁 >
vue---EleElement UI 表格导出功能
發(fā)布時間:2023/12/10
40
豆豆
生活随笔
收集整理的這篇文章主要介紹了
vue---EleElement UI 表格导出功能
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
步驟一:安裝依賴
安裝依賴: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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: jquery查找ul属性不是hide,j
- 下一篇: vue导出Excel图片