web如何实现通过一个资源文件链接进行下载而不是浏览?

code_sir
  • 450

比如有一个pdf或者mp3的文件地址,http://ab.com/1243.pdf
如何通过网页点击不是浏览,而是直接下载呢?

回复
阅读 1.1k
9 个回答

我的方案,拿走不谢,亲测有用

        async function downloadfile() {
            const { data } = await axios.get("http://dddd/99.pdf", {
                responseType: 'blob'
            });
            var blob = new Blob([data], { type: 'application/pdf' });
            const elink = document.createElement('a');
            elink.download = 'test';
            elink.style.display = 'none';
            elink.href = URL.createObjectURL(blob)

            document.body.appendChild(elink);
            elink.click();
            document.body.removeChild(elink); 
        }

楼上给的答案是标准做法,但 MDN 文档里有一句 “download属性对下载而言未必有效”。
比如跨域的时候就无效,如果是跨域的话你可以搜一下“JS 下载跨域文件”,有些方案对于同源但是无法通过 a 标签下载的文件也是有效的。

download有兼容性问题时的替代方案

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <button id="download">下载</button>
    <script>
      const download = (url) => {
        let link = document.createElement("a");
        link.style.display = "none";
        link.target = "_blank";
        link.href = url;
        const event = new MouseEvent("click");

        link.dispatchEvent(event);
      };

      document.getElementById("download").addEventListener("click", () => {
        download("https://github.com/AleeeKoi/js-file-downloader/archive/refs/tags/v1.1.19.zip");
      });
    </script>
  </body>
</html>
<a href="地址" download="地址">

<a download="" href='***'>下载</a>
浏览器针对不同格式文件,a链接处理方式不同
文件不跨域 => 下载
文件跨域 + 浏览器不支持解析 => 下载
文件跨域 + 浏览器可以解析 => 新标签中打开

https://blog.csdn.net/w201013...

请搜索 http header 下载, 授人以鱼不如授人以渔。
能做到全兼容

stackOverflow上的例子

const a = document.createElement('a')
a.href = 'downloadUrl'
a.download='filename.ext'
document.body.appendChild(a)
a.click()
a.remove()
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏