項目場景：
最近接手一個項目，其中一個需求是將查詢出來table中的數(shù)據(jù)導(dǎo)出為Excel文件，并下載到本地。
問題來了，這種東西，不是應(yīng)該后端去實現(xiàn)更好一些嗎？如果放在前端做，要拿到全部數(shù)據(jù)，然后把這些數(shù)據(jù)進行解析，再進行一系列的騷操作轉(zhuǎn)化成Excel文件，假如數(shù)據(jù)量少還好，萬一數(shù)據(jù)量龐大，給我整個幾萬條，那瀏覽器豈不是卡死？？（當(dāng)然這只是我這枚小菜鳥的個人見解，如果有路過的大神有好的建議或者經(jīng)驗，還請賜教一下~~）
----------------------------------------------------廢話分割線 -------------------------------------------------------------
言歸正傳，當(dāng)我查了一些資料的時候，發(fā)現(xiàn)實現(xiàn)起來其實還是挺簡單的，老規(guī)矩，不廢話了，直接上代碼！
解決方案：
1、裝包：npm install xlsx file-saver --save
2、引入：import XLSX from ‘xlsx’
3、template中寫一個button，doExport為點擊事件，觸發(fā)導(dǎo)出功能
<el-button
type="primary"
size="small"
:loading="exportLoading"
icon="el-icon-document"
@click="doExport"
>導(dǎo)出Excel</el-button>
界面樣式如下：
4、methods代碼如下：文章來源：http://www.zghlxwxcb.cn/news/detail-695690.html
doExport() {
// 開始生成文件時，添加一個loading讓它一直轉(zhuǎn)，待生成excel完畢之后再關(guān)掉
this.exportLoading = true
// 關(guān)鍵函數(shù)
function exportToExcel(fileName, tableData) {
const worksheet = XLSX.utils.json_to_sheet(tableData)
const workbook = { Sheets: { data: worksheet }, SheetNames: ['data'] }
const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
const data = new Blob([excelBuffer], { type: 'application/octet-stream' })
FileSaver.saveAs(data, `${fileName}.xlsx`)
}
// fileName 為生成的 Excel 文件名稱，為避免重復(fù)，這里使用時間戳作為前綴
const fileName = moment().format('YYYY-MM-DD hh:mm:ss') + ' xxx信息數(shù)據(jù)'
// perPageSize 為請求數(shù)據(jù)的數(shù)量，由于需求方想要全部的數(shù)據(jù)，而前端又要分頁，所以只能把這個參數(shù)設(shè)置成很大嘍，如果出問題我也沒辦法~
const params = {
page: this.currentPage - 1,
size: 100000,
queryCondition: {
area: this.searchForm.area,
deviceType: this.searchForm.deviceType,
hospitalName: this.searchForm.deviceCustomer,
erpMaterialDescription: this.searchForm.erpMaterialDescription,
deviceSerialNumber: this.searchForm.deviceSerialNumber,
materialNumber: this.searchForm.materialNumber,
workOrderCreatedTimeStart: this.searchForm.workOrderCreatedTime,
workOrderCreatedTimeEnd: this.searchForm.workOrderCreatedTime,
workOrderClosedTimeStart: this.searchForm.workOrderClosedTime,
workOrderClosedTimeEnd: this.searchForm.workOrderClosedTime,
workOrderNumber: this.searchForm.workOrderNumber,
engineerName: this.searchForm.engineerName,
warrantyStatus: this.searchForm.warrantyStatus,
materialReplaceTimesLow: this.searchForm.materialReplaceTimesLow,
materialReplaceTimesHigh: this.searchForm.materialReplaceTimesHigh
}
}
console.log(params)
const self = this
ibMaterialApi.getIBMaterialTableData(params).then(res => {
if (res.code === 200) {
// 解析excel文件
const excelData = []
for (let i = 0; i < res.data.length; i++) {
const excelObj = {}
excelObj.序列號 = (i + 1).toString()
excelObj.創(chuàng)建時間 = res.data[i].createTime === '0' ? '暫無數(shù)據(jù)' : res.data[i].createTime
excelObj.物料號 = res.data[i].materialNumber
excelObj.物料描述 = res.data[i].erpMaterialDescription
excelObj.客戶名稱 = res.data[i].hospitalName
excelObj.省份 = res.data[i].area
excelObj.機型 = res.data[i].deviceType
excelObj.整機序列號 = res.data[i].deviceSerialNumber
excelObj.故障時間 = res.data[i].equipmentDowntime
excelObj.故障描述 = res.data[i].diagnose
excelObj.解決方案 = res.data[i].suggestionSolution ? res.data[i].suggestionSolution : '暫無數(shù)據(jù)'
excelObj.舊件序列號 = res.data[i].oldSerialNumber ? res.data[i].oldSerialNumber : 'N.A'
excelObj.保修狀態(tài) = res.data[i].warrantyStatus
excelObj.工單號 = res.data[i].caseId
excelData.push(excelObj)
}
console.log(excelData)
exportToExcel(fileName, excelData)
self.exportLoading = false
} else {
self.exportLoading = false
}
}).catch(() => {
self.exportLoading = false
})
}
導(dǎo)出文件時，loading樣式如下：
文件下載成功！
ok！至此就結(jié)束了，代碼非常簡單，親測可用，cv即可~~
如果大家有什么更好的意見，歡迎批評指正！文章來源地址http://www.zghlxwxcb.cn/news/detail-695690.html
到了這里，關(guān)于使用vue實現(xiàn)導(dǎo)出Excel功能【純前端】的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
