vben 实现文件下载功能总结

最近用vben做的项目，有好几处都有下载的需求，且实现方法都各不相同，所以进行总结，希望可以帮到大家

前端将下载文件放到项目静态资源里进行下载
文件一般放在public文件下

<a :href="urlPath">下载模板</a>
let urlPath = ref('')
urlPath.value = 'resource/download_assets_template.xlsx' // 文件路径  public可以忽略不写

根据后台返回文件地址下载文件

例如： 后台返回 url = 'http://172.30.184.188:8080/test/worker/NetAssist.exe'
第一步 引入vben 下载方法
 import {
    
     downloadByUrl, downloadByOnlineUrl } from '/@/utils/file/download';
第二步 处理后台返回文件地址截取端口后面的路径：
// 返回从端口后第一个/ 的索引
function find(str, cha, num) {
    
    
   var x = str.indexOf(cha);
   for (var i = 0; i < num; i++) {
    
    
     x = str.indexOf(cha, x + 1);
   }
   return x;
 }
 下载事件
 const handelDownload = () => {
    
    
     let url = 'http://172.30.184.188:8080/test/worker/NetAssist.exe'
     // 调用上面封装方法 拿到索引值
     let port = find(data.filePath, '/', 2);
     // 拿到从端口号之后的文件地址，此处如果后端要求加前缀，可在此处进行拼接
     let returnURL = data.filePath.slice(port);
     // 获取文件结尾类型
     let str = data.filePath.slice(data.filePath.lastIndexOf('.'));
     let urlEnd = ['.jpg', '.png', '.JPG', '.PNG'];
     // 下载图片和下载文件调用方法不同 ，所有需要区分
     // 下载图片
     if (urlEnd.includes(str)) {
    
    
       downloadByOnlineUrl(returnURL, '下载图片命名');
     } else {
    
    
     // 下载文件
       downloadByUrl({
    
    
         url: returnURL,
         target: '_self',
         fileName: '下载文件命名',
       });
     }
   };

按后台接口文件流下载

第一步 引入vben 下载方法
import {
    
     downloadByData } from '/@/utils/file/download';
第二步 下载接口
import {
    
     defHttp } from '/@/utils/http/axios';
enum Api {
    
    
  downUrl = '/XXX/XXX/XXXX',
}
// 下载接口调用方法 --- 注意responseType: 'blob'，否则下载后为乱码、或者打不开
export const downNumbers = (params?: any) =>
 defHttp.post<any>(
   {
    
     url: Api.downNumbers, params, responseType: 'blob' },
   {
    
     errorMessageMode: 'none', isTransformResponse: false },
 );

下载事件调用
async function downLoad() {
    
    
  const data = await downNumbers({
    
    });
  // data 为接口返回文件流数据，如果你的接口嵌套一层那就逐层去取
  downloadByData(data, '文件名.xlsx');
}

vben 实现文件下载功能总结

猜你喜欢