js处理接口返回的二进制文件并下载，在线查看，空白问题

长影缚苍龙

已于 2024-09-29 11:24:27 修改

阅读量525

点赞数

分类专栏： js问题文章标签： javascript

于 2021-08-09 10:41:18 首次发布

本文链接：https://blog.csdn.net/qq_36521981/article/details/119532591

版权

js问题专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文探讨了如何使用JavaScript处理接口返回的二进制文件，解决在线查看时可能出现的空白问题。关键在于设置responseType为"arraybuffer"，并利用ArrayBuffer对象。同时，介绍了Blob接口的应用，并提供了相关Web API和Content-Type类型对应文件的参考资料链接。

摘要由CSDN通过智能技术生成

 const blob = new Blob([r.data]); //创建blob对象 
          const filename = item.fileName;  //下载文件的名称
          const downloadElement = document.createElement("a");  //创建a元素  
          const href = window.URL.createObjectURL(blob); //下载的链接
          downloadElement.href = href;
          [downloadElement.download] = [
            decodeURI(decodeURI(filename)),
          ]; //a元素添加download属性   
          document.body.appendChild(downloadElement); //添加元素
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放blob对

在线浏览文件

const blob = new Blob([r.data], {
        type: "application/pdf;chartset=UTF-8",
});
const href = window.URL.createObjectURL(blob);
window.open(href);

如果空白内容，尝试设置设置 responseType: “arraybuffer”, ArrayBuffer对象
在这里插入图片描述


this.$axios.get(url, {
          responseType: "arraybuffer",
        })

Web API Blob接口参考文档地址
https://developer.mozilla.org/zh-CN/docs/Web/API/Blob
各种类型文件对应文件的 Content-Type
https://blog.csdn.net/qq_36521981/article/details/119931672