模拟a标签下载文件（同源下载、跨域下载）

最新推荐文章于 2024-06-07 19:59:06 发布

FuyuMiracle

最新推荐文章于 2024-06-07 19:59:06 发布

阅读量1.3k

点赞数 1

分类专栏： Javascript 文章标签： javascript 前端 vue

本文链接：https://blog.csdn.net/weixin_56295520/article/details/131956069

版权

Javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章讲述了在同源策略下，a标签的download属性可以修改文件名进行下载，但跨域时该属性会失效。为解决这个问题，文中提出了使用HTML5的Blob对象配合axios先将文件下载为blob，然后创建a标签进行文件下载的方法，确保在Chrome和Firefox等支持download属性的浏览器中能正确修改文件名。

摘要由CSDN通过智能技术生成

一、同源下载

同源的情况下a.download修改文件名称是生效的。
跨域使用该方法，下载也生效，只是文件名称修改失效。

function downloadFile(fileUrl,fileName){
    const a = document.createElement('a');//创建a标签
    a.style.display = "none"//设置样式
    a.href = fileUrl;//下载链接
    a.download = fileName;//文件名称
    document.body.appendChild(a)//添加a标签到body
    a.click();//点击a标签
    document.body.removeChild(a)//移除a标签
}

二、跨域下载

在使用a标签下载文件时，download属性可以更改下载的文件名，但是当a标签的下载链接跨域时，download属性将不会生效，原因是浏览器无法获取到文件，不能对他进行更改
注意：html5 新特性a标签download属性只支持谷歌和火狐

在谷歌和火狐浏览器a标签download属性修改文件名失效的原因：不同源，访问的域名和href的域名要一致。
解决办法：
使用HTML5 Blob实现文件下载，先把文件以bobl的形式下载到当前页面，再创建a标签。

import axios from 'axios';

function downloadFile(fileUrl,fileName){
    axios.get(fileUrl, { responseType: "blob" }).then(response => {
       const blob = new Blob([response.data]);
       const a = document.createElement("a");//创建a标签
       a.href = window.URL.createObjectURL(blob);// 创建下载的链接
       a.download = fileName;//下载文件名称
       a.style.display = "none";
       document.body.appendChild(a);//a标签追加元素到body内
       a.click();//模拟点击下载
       document.body.removeChild(a);// 下载完成移除元素
        window.URL.revokeObjectURL(a.href);// 释放掉blob对象
    }).catch(console.error);
}