一般來講導出都是后端完成邏輯，給接口給到前端，前端調用接口簡單處理導出就可以了，但是上次我們公司做內部使用的后臺，認為數據量小，前端導出實時更快，于是也有了前端導出的方式，做個總結。

先過一下后端導出的做法以及需要注意的一些點：

//我是事先封裝了一個請求的方法，然后是正常的請求，只是需要注意的是要加一個responseType: 'blob',因為后端返回的就是一個blob類型 export function getDetailExcel (params) {return request({url: '/detailExcel',method: 'get',responseType: 'blob',params}) }getDetailExcel(this.detailExcelQueryData).then(data => {const url = window.URL.createObjectURL(new Blob([data]))const link = document.createElement('a')link.style.display = 'none'link.href = urllink.setAttribute('download',`用戶數據.xls`)document.body.appendChild(link)link.click() })

前端導出的話我是通過調用查詢接口，拼接數據然后導出：

// 導出數據exportDataFe () {// const tipText = this.textFormat()this.$confirm(`確定導出數據嗎？`, '提示', {confirmButt·onText: '確定',cancelButtonText: '取消',closeOnClickModal: false}).then(() => {this.requestTimes = 0this.excelCount = 1this.exportList = []this.exporting = trueconst query = Object.assign({}, this.exportReuqireData)query.pageIndex = 0query.pageSize = this.requestSizegetWxusers(query).then((res) => {if (res.total <= this.requestSize) {this.exportList = this.formatJson(res.users)this.exportExcel()} else {let total = res.totalif (res.total > this.maxSize) {total = this.maxSizethis.$message({message: '單次最多可下載10萬條數據',duration: 5000,type: 'warning'})}// 先判斷有多少個文件this.excelCount = Math.ceil(total / this.excelSize)if (this.excelCount > 1) {this.requestTimes = Math.ceil((total - (this.excelCount - 1) * this.excelSize) /this.requestSize)for (let k = 0; k < this.excelCount - 1; k++) {this.combinedData(10, k)}this.combinedData(this.requestTimes, this.excelCount - 1)} else {this.requestTimes = Math.ceil(total / this.requestSize)this.combinedData(this.requestTimes)}}}).catch(() => {this.exporting = false})})},combinedData (requestTimes, fileOrder) {const alOrder = fileOrder || 0let allRequest = []for (var i = 0; i < requestTimes; i++) {const query = Object.assign({}, this.exportReuqireData)query.pageSize = this.requestSizequery.pageIndex = i * query.pageSize + alOrder * this.excelSizeallRequest.push([i, query])}allRequest = allRequest.map((item, index) => {return getWxusers(item[1])})Promise.all(allRequest).then((values) => {values.forEach((item) => {const list = this.formatJson(item.users)this.exportList = this.exportList.concat(list)})let orderif (fileOrder === undefined) {order = 0} else {order = ++fileOrder}this.exportExcel(order)this.excelCount = this.excelCount - 1})},// 下載表格exportExcel (fileOrder) {import('@/vendor/Export2Excel').then((excel) => {// const fileText = this.textFormat()const tHeader = ['Id','手機號','學生姓名','學校名稱','學校id','會員等級','會員激活時間','會員到期時間','省份','高中所在學校']const data = this.exportList// const fileName = `AI升學寶用戶${fileText}數據` + (fileOrder ? '(' + fileOrder + ')' : '')const fileName =`AI升學寶用戶數據` + (fileOrder ? '(' + fileOrder + ')' : '')excel.export_json_to_excel({header: tHeader,data,filename: fileName,autoWidth: true,bookType: 'xlsx'})this.downloadLoading = falsethis.exportList = []this.exporting = falsethis.$message({message: '用戶數據已導出',duration: 5000,type: 'success'})})},

總結

以上是生活随笔為你收集整理的Excel文件导出，前端导出或者后端导出的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。