vue使用axios实现下载附件以及根据响应头content-disposition，拿到附件名称filename，实现下载功能

呆呆加油呀

已于 2024-09-04 14:53:48 修改

阅读量365

点赞数 5

文章标签： javascript 前端 vue.js

于 2024-09-04 14:50:50 首次发布

本文链接：https://blog.csdn.net/m0_59157023/article/details/141893586

版权

直接代码

export function download(url) {
    return downloadserviceIGO({
        url: url,
        method: 'get',
        responseType: 'blob',
        closeMsg: true,
        loadingText: true
    })
}  

/**
       * 批量下载附件
       */
       async download(row) {
          let url = `xxxurl`;// 请求地址
          let response = await download(url);
        
        console.log(response,'AAA')
        // 从响应对象中获取Content-Disposition  
        const contentDisposition = response.headers['content-disposition'];
        console.log(contentDisposition); // 打印Content-Disposition的值
    
        // 如果需要处理文件下载等，可以基于contentDisposition做进一步处理  
        // 示例：如果Content-Disposition中包含filename，可以提取出来  
        const matches = /"([^"]*)"/.exec(contentDisposition);  
        let filename;
        if (matches != null && matches[1]) {
              filename = matches[1];  
            console.log('文件名:', filename);  
            // 接下来可以基于filename处理文件下载等  
        }  

          const blob = new Blob([response.data]);
          // 创建一个指向该对象的URL 
          const href = URL.createObjectURL(blob,{ type: response.headers['Content-Type'] });// 创建新的URL表示指定的blob对象
          const a = document.createElement('a');// 创建a标签
          a.style.display = 'none';
          // 指定下载链接
          a.href = href;
          // 指定下载文件名
          a.setAttribute('download', filename);
          a.click();// 触发下载
          URL.revokeObjectURL(a.href);// 释放URL对象
      },