后端返回Excel导出文件流前端实现下载
vue 2023-06-02 14:19:16

后端只返回文件流,没有其他文件名之类的情况下:

 

XML/HTML Code复制内容到剪贴板
  1. <el-button size="large" type="primary" @click="onClickExport">导出记录</el-button>  

 

JavaScript Code复制内容到剪贴板
  1. const onClickExport = () => {  
  2.   $API.user.settlement.exportRecord.post({},{responseType: "blob"}).then(res => {  
  3.     // data就是接口返回的文件流  
  4.     const data = res  
  5.     const fileName = '打款记录-' + $TOOL.dayjs.now()  + '.xlsx'  
  6.     let blob = new Blob([data], { type: "application/vnd.ms-excel" });  
  7.     let fileUrl = URL.createObjectURL(blob);  
  8.     let a = document.createElement("a");  
  9.     a.setAttribute("href", fileUrl);  
  10.     a.setAttribute("download", fileName);  
  11.     a.click();  
  12.   
  13.   }).catch(err => {  
  14.   
  15.   }).finally(() => {  
  16.   
  17.   })  
  18. }  

 

本文来自于:http://www.yoyo88.cn/study/vue/671.html

Powered by yoyo苏ICP备15045725号