最近收到一个需求,要将页面列表里的数据生成表格并下载到本地,就是下面情况
后端小哥给了接口,我这边也调了接口,然后发现。。。。生成的数据是一堆乱码!!!
下载到本地的表格是
头皮发麻!!!!困扰了一天半,最后才发现是我少写了一个字母!!!
export const reqExportAllApplyDetailXls = data => {
return request({
url: `/dataStatistics/exportAllApplyDetailXls`,
method: 'get',
params: data,
responseType: 'blob',//返回的响应数据类型为二进制数据流 (Blob)。
})
}
responseType我之前写的是respnseType!!!!!🤬🤬🤬🤬
// 导出数据操作
async deriveHandler() {
let param = {
}
let data = await reqExportAllApplyDetailXls(param)
if (data) {
let fileName = '接待历史信息查询'
if (typeof window.navigator.msSaveBlob !== 'undefined') {
window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
} else {
let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName + '.xls')
document.body.appendChild(link)
link.click()
document.body.removeChild(link); //下载完成移除元素
window.URL.revokeObjectURL(url); //释放掉blob对象
}
}
},
👆上面是将获取到的数据通过blob方法来自己安装到本地
代码解释如下:
data
是包含 Excel 文件内容的二进制数据。首先,我们使用new Blob([data], { type: 'application/vnd.ms-excel' })
创建一个Blob
对象,表示这是一个 Excel 文件。然后,通过
window.URL.createObjectURL()
方法将Blob
对象转换成 URL 对象url
。接下来,我们创建了一个<a>
标签元素,设置其样式为display: none
,并将href
属性设置为url
,以及设置download
属性为指定的文件名(fileName + '.xls'
)。接着,我们将
<a>
元素添加到页面的<body>
中,调用link.click()
实现模拟点击下载文件。最后,我们使用
document.body.removeChild(link)
将下载链接从页面中移除,使用window.URL.revokeObjectURL(url)
释放掉之前创建的 URL 对象。这样,整个下载过程就完成了,并且下载的文件会以指定的文件名保存在用户的设备上。注意,
fileName
是你给定的文件名,可以根据实际需求进行修改。