vue,js,fetch请求数据流下载文件

908522528

vue,js,fetch请求数据流下载文件

假设现在有一后台API提供访问，那么要想前端进行下载head头需要设置如下类型

1. Content-Type:application/octet-stream

复制代码

下面两个head头建议也添加一下，虽然不是必须的(注意filename后面如果有中文，需要进行urlencode,否则会报错)

1. Access-Control-Expose-Headers：Content-Disposition
   
2. Content-Disposition：attachment;filename=rename.xlsx
   

复制代码

前端部分：

1. fetch('/api', function (response) {
   
2.    response.blob().then((blob) => {
   
3.    saveBlobAs(blob, 'result.xls')
   
4.             })
   
5.         }, function (result) {
   
6.    console.info("获取数据失败" + result.message);
   
7.         })
   
8. 
   
9. // 保存bolb的方法
   
10. function saveBlobAs (blob, filename) {
    
11.    if (window.navigator.msSaveOrOpenBlob) {
    
12.       navigator.msSaveBlob(blob, filename)
    
13.    } else {
    
14.       const anchor = document.createElement('a')
    
15.       const body = document.querySelector('body')
    
16.       anchor.href = window.URL.createObjectURL(blob)
    
17.       anchor.download = filename
    
18. 
    
19.       anchor.style.display = 'none'
    
20.       body.appendChild(anchor)
    
21. 
    
22.       anchor.click()
    
23.       body.removeChild(anchor)
    
24. 
    
25.       window.URL.revokeObjectURL(anchor.href)
    
26.    }
    
27.     }

复制代码

这样就完事了

夜空星语

感谢LZ分享

风铃的低语

1111111111111111111

魔法兔子✨

11111111111

水晶般的梦

66666666666666

千纸鹤的梦

66666666666666666

云上城堡

1111111111111111111

繁星点点

11111111111111

岁月静好☕

1111111111111111111

风中的花瓣

感谢LZ分享