Vue从response读取流下载


1、创建公共方法

1. /**
   
2. * 从response读取流下载
   
3. * @param response 响应体
   
4. * @param suffix 文件后缀名
   
5. */
   
6. function downloadBlob(response,suffix){
   
7. 
   
8.   let fileName = new Date().getTime()+"_"+suffix+'.xlsx'
   
9.   let blob = new Blob([response]);//response.data为后端传的流文件
   
10.   let url = window.URL.createObjectURL(blob);
    
11.   let downloadElement = document.createElement("a");
    
12.   downloadElement.style.display = "none";
    
13.   downloadElement.href = url;
    
14.   downloadElement.download = fileName;
    
15.   document.body.appendChild(downloadElement);
    
16.   downloadElement.click();
    
17.   document.body.removeChild(downloadElement);
    
18.   window.URL.revokeObjectURL(url);
    
19. }
    
20. 
    
21. export default {
    
22.   downloadBlob
    
23. }

复制代码

2、挂载到Vue原型上

1. import blob from '@/utils/blob'
   
2. Vue.prototype.$blob = blob

复制代码

3、使用

1. /** 导出按钮操作 */
   
2.     handleExport() {
   
3.       this.$confirm('是否导出所有数据?', "警告", {
   
4.           confirmButtonText: "确定",
   
5.           cancelButtonText: "取消",
   
6.           type: "warning"
   
7.         }).then(function() {
   
8.           return exportData();
   
9.         }).then(response => {
   
10.           this.$blob.downloadBlob(response,"数据表")
    
11.         }).catch(()=>{})
    
12.     }

复制代码

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源：https://www.jb51.net/javascript/339474vam.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！