2019-11-12

在项目中,我们通常需要导出一些数据,后台传输过来的是文件流类型的,这时候前端就需要对传输过来的数据进行处理,然后下载文件。
我们可以把后台传过来的数据用blob对象接收。

 /* 下载PDF的方法 */
downloadPdf = () => axios.post(`这是请求的接口路径`, { responseType: 'blob' });

获取的数据如下图
文件流blob对象.png

以谷歌浏览器举个栗子:

  1. 点击下载按钮,请求后台接口,获取后台传输过来的数据data
  2. axios中有个方法可以把文件流对象转blob
  3. 根据window.URL.createObjectURL方法生成一个链接
  4. 创建一个a标签元素
  5. 设置属性,a.download = '你的文件名字',a.href = '刚刚生成的URL'
  6. 使这个标签触发点击事件
  7. 移除元素
  • 接受data之后的处理大致代码如下
const blobUrl = window.URL.createObjectURL(data);
const title = '下载文件的标题.pdf';
const a = document.createElement('a');
a.style.display = 'none';
a.download = title;
a.href = blobUrl;
a.click();
document.body.removeChild(a);

下面是IE浏览器中处理方法:

  • 接受data之后的处理大致代码如下
if ('msSaveOrOpenBlob' in navigator) { // 判断是ie的浏览器,调用ie文件下载的方法
    const blob = new Blob([data], { type: 'application/pdf' });
    const title = 'ie下载.pdf';
    window.navigator.msSaveOrOpenBlob(blob, title);
}

如果是其他类型的文件,只需要把相应的后缀替换掉即可!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容