a标签download无效解决办法

重点:

跨域问题‌:如果当前页面地址和预下载的文件所处服务器不在同一域名下,由于跨域访问限制,download配置会不生效。可以使用blob方式将文件转为同源文件,再进行配置和下载‌

方法如下

const downloadExcel = async(fileUrl,fileName) => {
      try {
        const response = await axios.get(fileUrl, { responseType: 'blob' });
        const contentType = response.headers['content-type'];
        const blob = new Blob([response.data], { type: contentType });

        if (typeof window.navigator.msSaveBlob !== 'undefined') {
        // 兼容IE浏览器
        window.navigator.msSaveBlob(blob, fileName);
        } else {
        const url = window.URL.createObjectURL(blob);

        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', fileName);
        link.style.display = 'none';

        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);

        window.URL.revokeObjectURL(url);
        }
      } catch (error) {
          console.error('Error downloading file:', error);
      }
}

### HTML `a` 标签 `download` 属性使用方法 #### 基本语法结构 HTML中的`<a>`标签可以通过设置`download`属性来指定链接用于下载资源而不是导航到新页面。基本的语法如下: ```html <a href="URL" download>点击这里下载</a> ``` 此标记会提示浏览器尝试下载位于`href`所指向位置的内容,而非简单地加载该链接。 #### 完整示例说明 下面是一个完整的HTML文档例子,展示了如何利用`download`属性创建一个可以下载特定文件(如PDF)的超链接[^2]: ```html <!DOCTYPE html> <html> <head> <title>文件下载示例</title> </head> <body> <h1>文件下载示例</h1> <p><a href="example.pdf" download>点击此处下载 PDF 文件</a></p> </body> </html> ``` 在这个实例里,当用户点击链接时,将会触发对名为`example.pdf`文件的下载操作。 #### 自定义保存名称 除了能够启动下载外,还可以通过给`download`赋值的方式自定义被下载文件的名字。例如,在以下代码片段中,尽管实际文件路径指向的是图片文件,但最终会被命名为`xiazai.png`进行保存[^3]: ```html <div> <p><a href="./images/photo.jpg" download="xiazai">下载并重命名图片</a></p> </div> ``` 需要注意的是,并不是所有的Web浏览器都支持这一特性;目前主要是在Firefox和Chrome中有较好的兼容性表现[^4]。对于其他不支持的浏览器,则可能忽略这个属性而按照常规方式处理链接。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值