关于Vue中a标签下载的文件重命名处理办法。

2022-02-21 17:34:18 阅读：800 来源： 互联网

标签：重命名 Vue url 标签 xhr relevant link blob file

用默认的a标签下载：

var link = document.createElement('a');
link.href = file.url;
link.download = file.name;
link.target="_blank";
link.click();

但此方法仅在不跨域的情况下可用。

跨域的情况下则可用如下办法：

1.点击下载按钮调用

  dfLoad(file) {
      this.getBlob(file.url).then(blob => {
         this.DownloadItem(blob, file.fileName);
     });
   },

2.通过传入的url拿到blob对象

  getBlob(url) {
    return new Promise(resolve => {
     const xhr = new XMLHttpRequest();
     xhr.open('GET', url, true);
     xhr.responseType = 'blob';
     xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response);
      }
    };
    xhr.send();
  });
},

3.最后调用下载文件的方法

  DownloadItem(blob,fileName){
         let link = document.createElement('a');
         link.href = window.URL.createObjectURL(blob);
         link.download = fileName;
         link.click();
    },

原文：https://blog.csdn.net/pqj222/article/details/102628834?spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-3.pc_relevant_aa&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-3.pc_relevant_aa&utm_relevant_index=5

标签：重命名,Vue,url,标签,xhr,relevant,link,blob,file
来源： https://www.cnblogs.com/qingfengyuan/p/15919785.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

关于Vue中a标签下载的文件重命名处理办法。