纯前端excel导出单个、多个excel列表方法封装、download跨域文件路径、文件流下载方法封装、

封装方法：
export function downloadFile(url, fileName) { // 跨域文件路径、下载到本地的文件名
var x = new XMLHttpRequest()
x.open(‘GET’, url, true)
x.responseType = ‘blob’
x.onload = function(e) {
var url = window.URL.createObjectURL(x.response)
var a = document.createElement(‘a’)
a.href = url
a.download = fileName
a.click()
}
x.send()
}
vue文件引入
import { downloadFile } from ‘@/utils/download_streamFile’
点击下载方法：
dowmLoadFile(item) {
window.loading()
getFileDownloadUrl(item.fileUrl).then(res => {
downloadFile(res.data, item.fileName)
window.loading(false)
}).catch(() => {
window.loading(false)
})
},
第二种后端返回文件流下载方法：
export function downloadBlob(url, req, filename) {
let myRea = req
Message({
message: ‘正在导出，请稍等…’,
type: ‘success’,
duration: 0
})
var oReq = new XMLHttpRequest()
oReq.open(‘post’, process.env.BASE_API + url, true)
oReq.setRequestHeader(‘content-type’, ‘application/json’)
oReq.setRequestHeader(‘X-Token’, getToken())
oReq.responseType = ‘blob’
oReq.onload = function(oEvent) {
window.loading(false)
var content = oReq.response
var elink = document.createElement(‘a’)
elink.download = filename + ‘.zip’
elink.style.display = ‘none’
var blob = new Blob([content])
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
document.body.removeChild(elink)
Message.closeAll()
}
oReq.send(JSON.stringify(myRea))
}
前端vue文件引入方法：
import { downloadBlob } from ‘@/utils/download_streamFile’
downloadBlob(exportUrl, data, title)

第三种：纯前端excel表格table列表导出多个或者单个文件方法
封装：
const exportExcelSheets = (data, header, xlsxName, wscols) => {
const sheetNames = []
const sheetsList = {}
const wb = XLSX.utils.book_new()

for (const key in data) {
sheetNames.push(key)
const columnHeader = header[key] // 此处是每个sheet的表头
const temp = transferData(data[key], columnHeader)
sheetsList[key] = XLSX.utils.aoa_to_sheet(temp)
sheetsList[key][’!cols’] = wscols[key]
}

wb[‘SheetNames’] = sheetNames
wb[‘Sheets’] = sheetsList

XLSX.writeFile(wb, xlsxName + ‘.xlsx’)
}

function transferData(data, columnHeader) {
const content = []
content.push(columnHeader)
data.forEach((item, index) => {
const arr = []
columnHeader.map(column => {
arr.push(item[column])
})
content.push(arr)
})
return content
}
Vue.prototype.$exportExcelSheets = exportExcelSheets

vue文件调用导出多个或者单个文件列表：

exportBtn() {
const listData= this.tableData.map((res) => {
return {
工号: res.number,
姓名: res.name,
性别: res.sex,
…
}
})
const datas = {
‘教育经历’: listData,
‘基础信息’: staffInfo,
‘银行信息’: staffBank
}
const header = {
‘基础信息’: [‘工号’, ‘姓名’, ‘性别’, ‘合同公司’, ‘部门’, ‘职称’, ‘入职时间’],
‘教育经历’: [‘工号’, ‘姓名’, ‘开始时间’, ‘结束时间’, ‘学校’, ‘专业’, ‘学历’],
‘银行信息’: [‘工号’, ‘姓名’, ‘银行信息’, ‘开户支行’, ‘银行卡号’]
}
const nameList = ‘员工信息‘
const wscols = {
‘基础信息’: [{ wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 }],
‘教育经历’: [{ wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 }],
‘银行信息’: [{ wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 }]
}
this.$exportExcelSheets(datas,header,nameList,wscols)this.$message.success(‘正在导出，请稍等…’)
},