如何使用a标签或者按钮点击下载文件

SanMu三木

已于 2023-05-22 14:36:33 修改

阅读量1w

点赞数 4

文章标签： html5 前端 vue.js javascript

于 2023-05-22 14:35:12 首次发布

本文链接：https://blog.csdn.net/m0_60322614/article/details/130805989

版权

提示：本地服务点击只进行了跳转没有下载的情况，大多数是因为链接不同源。

文章目录

一、前言

本人在做一个项目管理系统时需求点击按钮下载文件，测试多种方法下载出来的文件都是损坏。查询多个文章，找到在我使用时的具体的bug问题。（如果不是新手可直接跳转到问题解决模块）

一、a标签

<a> 标签定义超链接，用于从一个页面链接到另一个页面。

<a> 元素最重要的属性是 href 属性，它指定链接的目标。

二、a标签的使用

1.元素中使用

<a href="链接地址"></a>

使用a标签下载文件的方法

<a :href="链接地址" target="downloadFile" download>文件名</a>

2.动态添加a标签下载（js中）

let url = 链接地址;
downloadFile(url)
function downloadFile(url) {
    //下载文件
    console.log(url)
    let a = document.createElement("a");
    a.setAttribute("href", url);
    a.setAttribute("download", 文件名);
    a.setAttribute("target", "_blank");
    let clickEvent = document.createEvent("MouseEvents");
    clickEvent.initEvent("click", true, true);
    a.dispatchEvent(clickEvent);
}

三、问题解决

使用上述的方法可能会出现文件跳转链接展示但是没有下载的问题。这里提供两个我找到的解决方法。

1.在链接地址后拼接'?response-content-type=application/octet-stream'

let url = 链接地址 + '?response-content-type=application/octet-stream';
downloadFile(url)
function downloadFile(url) {
    //下载文件
    console.log(url)
    let a = document.createElement("a");
    a.setAttribute("href", url);
    a.setAttribute("download", 文件名);
    a.setAttribute("target", "_blank");
    let clickEvent = document.createEvent("MouseEvents");
    clickEvent.initEvent("click", true, true);
    a.dispatchEvent(clickEvent);
}

2.在进行拼接后还是只跳转不下载

这种情况主要是因为现在浏览器的文件下载规则问题，新版的浏览器像Google浏览器之类下载文件是需要网页和文件地址是同源的。如果不同源的话只会打开而不会下载。