将后台二进制文件（.bin数据）转为Excel格式

最新推荐文章于 2025-08-21 15:44:32 发布

原创最新推荐文章于 2025-08-21 15:44:32 发布 · 3.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue

这篇博客介绍了如何在Vue项目中利用JavaScript处理后台返回的二进制.bin数据，将其转化为Excel文件供用户下载。关键步骤包括在请求接口时设置responseType为'blob'，然后创建一个链接元素，利用window.URL.createObjectURL(blob)生成下载链接，并触发下载。

首先应该在请求接口方法写responseType: ‘blob’，后台返回的数据会被强制转为blob类型；

其次在导出的方法里写如下：

UserExcel() {
exportExcelForm(Object.assign({}, this.search)).then(blob => {
let filename = new Date(+new Date() + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
let url = window.URL.createObjectURL(blob);
let link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download', filename + '.xlsx');
document.documentElement.appendChild(link);
link.click();
document.documentElement.removeChild(link);
this.$message.success('文件导出成功')
}).catch(() => {
this.$message.error('文件导出失败')
})
},

或者

exportExcelForm(this.listQuery).then(blob =>{

let filename = new Date(+new Date() + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')

let url = window.URL.createObjectURL(blob);

let link = document.createElement('a');

link.style.display = 'none';

link.href = url;

link.setAttribute('download', filename + '.xlsx');

document.documentElement.appendChild(link);

link.click();

document.documentElement.removeChild(link);

this.$message.success('文件导出成功')

}).catch(() => {

this.$message.error('文件导出失败')

})