当前位置：文江博客话题详情

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

发布于 2022-09-13 00:02:24 字数 125 浏览 20 评论 0

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

风苍溪 2022-09-20 00:02:24

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

        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); 
        }

回复收藏 0

时光是把杀猪刀 2022-09-20 00:02:24

你可以参考这个
如何预览以及下载pdf文件

//需要axios.js
 function dowanloadpdf() {
    axios({
      method: 'get',
      url:
        'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8e76dff9-ce38-4577-9e5c-398943705060/a5b050b8-3fa1-4436-b231-7b40725de731.pdf',
      responseType: 'blob',
    }).then(function (response) {
      const link = document.createElement('a')
      let blob = new Blob([response.data], { type: response.data.type })
      let url = URL.createObjectURL(blob)
      link.href = url
      link.download = '前端工程师必备技能.pdf'
      link.click()
    })
  }

回复收藏 0

战皆罪 2022-09-20 00:02:24

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

回复收藏 0

咿呀咿呀哟 2022-09-20 00:02:24

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>

回复收藏 0

幻梦 2022-09-20 00:02:24

file-saver 推荐这个库

回复收藏 0

林空鹿饮溪 2022-09-20 00:02:24

<a href="地址" download="地址">

回复收藏 0

七分※倦醒 2022-09-20 00:02:24

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

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

回复收藏 0

挖鼻大婶 2022-09-20 00:02:24

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

回复收藏 0

相思故 2022-09-20 00:02:24

stackOverflow上的例子

const a = document.createElement('a')
a.href = 'downloadUrl'
a.download='filename.ext'
document.body.appendChild(a)
a.click()
a.remove()

回复收藏 0

~没有更多了~

关于作者

三寸金莲

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（9）

关于作者

相关话题

热门标签

推荐作者

一梦浮鱼

mb_Z9jVigFL

伴随着你

耳钉梦

18618447101

蜗牛

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（9）

关于作者

相关话题

热门标签

推荐作者

一梦浮鱼

mb_Z9jVigFL

伴随着你

耳钉梦

18618447101

蜗牛

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。