new blob 下载excel 前端二进制数据

本文介绍了一种使用JavaScript实现的文件下载方法,包括Excel表格及JSON数据的下载过程。通过创建 Blob 对象并利用 HTML5 的 a 标签触发点击事件来实现不同数据类型的文件下载。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

download(data, fileName) {
if (!data) {
return
}
let url = window.URL.createObjectURL(new Blob([data], {type: “application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8”}))
console.log(url)
let link = document.createElement(‘a’);
link.style.display = ‘none’;
link.href = url;
link.setAttribute(‘download’, fileName);
document.body.appendChild(link);
link.click();
},

//下载数据json字符串
downloadTxt(row) {
console.log(row.moduleJson);
let jsonStr1 = JSON.stringify(row.moduleJson.replace(/“/g, “””));
let jsonStr = JSON.parse(jsonStr1);
console.log(jsonStr);
let str = jsonStr
let strData = new Blob([str], {type: ‘text/plain;charset=utf-8’});
saveAs(strData, row.demandName + “.txt”);
},

<think>好的,我现在需要解决用户的问题:如何使用JavaScript中的new Blob创建Excel格式的文件。用户已经提供了一些参考资料,我需要仔细阅读这些引用内容,并整理出正确的步骤。 首先,用户提到了三个引用。引用1和引用2、3都涉及前端导出Excel的方法。关键点在于使用Blob对象和设置正确的MIME类型。我需要确认Excel文件的MIME类型是什么,通常在引用2中看到的是application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,而引用3使用的是application/vnd.ms-excel。这两个可能对应不同的Excel版本,比如.xlsx和.xls。需要明确用户需要哪种格式,但通常推荐较新的.xlsx格式,所以对应的MIME类型应该是前者。 接下来,创建Blob对象时需要将数据转换为正确的格式。例如,如果数据二进制的,比如从后端API接收的文件流,可以直接使用。但如果是前端生成的数据,可能需要构造Excel文件的结构,比如使用库如SheetJS(xlsx库)来生成Excel二进制数据。不过用户的问题可能更倾向于直接设置Blob类型,而不是生成Excel内容。例如,用户可能已经获得了正确的文件数据流,只需正确设置Blob类型即可。 根据引用2中的代码示例,创建Blob时指定type为application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,并且设置charset=utf-8。不过实际上,ExcelBlob类型是否需要charset可能取决于内容是否为文本。如果是二进制数据,可能不需要charset。例如,引用3中使用的是application/vnd.ms-excel,这对应老版本的Excel.xls),而较新的.xlsx使用不同的MIME类型。 另外,用户的问题是如何将Blob对象设置为Excel格式,所以关键步骤是正确设置Blob的type参数,并且确保数据是正确的Excel文件内容。例如,如果是从后端获取的文件流,直接将其放入Blob即可。如果前端生成数据,可能需要使用库来生成正确的Excel格式数据。 另外,创建下载链接的部分,需要创建a标签,设置href为Blob的URL,并添加download属性指定文件名。之后模拟点击,完成下载。同时,释放URL对象和移除创建的a标签也是必要的步骤,以避免内存泄漏。 总结步骤应该是: 1. 准备Excel文件的数据,可能是通过API获取的二进制数据,或者前端生成的数据。 2. 创建Blob对象,设置正确的MIME类型。 3. 生成URL,创建a标签,设置下载属性,触发点击事件。 4. 清理创建的URL和a标签。 可能需要注意的问题包括:确保后端返回的数据是正确的文件流,设置responseType为'blob'在请求中,如引用3中的axios配置。此外,文件名需要带有.xlsx或.xls扩展名,以匹配MIME类型。 现在需要将这些步骤整理成用户易懂的解答,并确保代码示例正确。同时,根据用户提供的引用,正确引用相关部分,比如在设置Blob类型时引用引用2和3的内容。</think>在JavaScript中创建Excel格式的Blob对象需要指定正确的MIME类型,并结合前端下载技术实现文件导出。以下是具体实现步骤: ### 1. 设置Blob对象的Excel格式类型 创建Blob时需指定`type`参数为Excel文件的MIME类型: - **新版Excel.xlsx)**:`application/vnd.openxmlformats-officedocument.spreadsheetml.sheet` [^2] - **旧版Excel.xls)**:`application/vnd.ms-excel` [^3] ```javascript const excelBlob = new Blob([data], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }); ``` ### 2. 生成下载链接 通过`URL.createObjectURL`创建临时链接,并创建隐藏的`<a>`标签触发下载: ```javascript const url = window.URL.createObjectURL(excelBlob); const link = document.createElement('a'); link.href = url; link.download = '文件名.xlsx'; // 扩展名需与MIME类型匹配 ``` ### 3. 完整实现示例 ```javascript function downloadExcel(data, fileName) { // 创建Excel格式的Blob const blob = new Blob([data], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }); // 创建下载链接 const url = window.URL.createObjectURL(blob); const link = document.createElement('a'); link.style.display = 'none'; link.href = url; link.download = `${fileName}.xlsx`; // 触发下载 document.body.appendChild(link); link.click(); // 清理资源 URL.revokeObjectURL(url); document.body.removeChild(link); } // 使用示例(需确保data是有效的Excel文件数据) fetch('API地址', { responseType: 'blob' }) .then(res => res.blob()) .then(blobData => downloadExcel(blobData, '报表')); ``` ### 关键注意点 1. **数据来源**: - 后端返回的文件流可直接使用(需设置`responseType: 'blob'`)[^3] - 前端生成数据需使用`xlsx`等库构造Excel数据结构 2. **编码问题**: - 中文乱码需在HTTP头添加`charset=utf-8` - 二进制文件流不需要额外编码处理[^2] 3. **兼容性**: - 现代浏览器支持Blob下载 - IE10以下需使用`navigator.msSaveBlob`兼容方案
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值