VUE前端通过URL下载文件

res.url是一个文件地址
普通文件下载直接window.location.href = res.url即可下载文件
但是pdf文件这样会直接打开预览,无论是用weindow.open()还是 a 标签
使用download.js可以免打开直接弹出下载框

vue使用方法:
首先命令行

npm install downloadjs -S

在需要使用的页面xxx.vue文件的script标签内

import download from 'downloadjs'

在你需要下载的方法内

downloadPdf(){
    download(res.url)
},

如果不喜欢这种方法还可以使用将URL转换为blob地址

let url = res.url;//路径地址
let link = document.createElement('a');
fetch(url).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址
    link.href = URL.createObjectURL(blob);
    link.download = res.filename; //文件名
    document.body.appendChild(link);
    link.click()
})
tag(s): Vue
show comments · back · home
Edit with Markdown

已有 6 条评论

  1. pkbqqqwkky

    选材新颖独特,通过细节描写赋予主题鲜活生命力。

    pkbqqqwkky February 28th, 2025 at 04:37 pm回复
  2. aebtsuwbom

    ?诗歌散文评语?

    aebtsuwbom February 28th, 2025 at 10:05 pm回复
  3. yljwsqpxkt

    研究方法科学,数据支撑充分,结论可靠。

    yljwsqpxkt February 28th, 2025 at 10:27 pm回复
  4. cymzwvubkb

    新盘新盘 这个月刚上新盘 新车第一个吃螃蟹!

    cymzwvubkb October 6th, 2025 at 01:25 pm回复
  5. axuyxyjalt

    2025年10月新盘 做第一批吃螃蟹的人coinsrore.com
    新车新盘 嘎嘎稳 嘎嘎靠谱coinsrore.com
    新车首发,新的一年,只带想赚米的人coinsrore.com
    新盘 上车集合 留下 我要发发 立马进裙coinsrore.com
    做了几十年的项目 我总结了最好的一个盘(纯干货)coinsrore.com
    新车上路,只带前10个人coinsrore.com
    新盘首开 新盘首开 征召客户!!!coinsrore.com
    新项目准备上线,寻找志同道合 的合作伙伴coinsrore.com
    新车即将上线 真正的项目,期待你的参与coinsrore.com
    新盘新项目,不再等待,现在就是最佳上车机会!coinsrore.com
    新盘新盘 这个月刚上新盘 新车第一个吃螃蟹!coinsrore.com

    axuyxyjalt October 7th, 2025 at 05:55 pm回复
  6. oefuinhyaf

    2025年10月新盘 做第一批吃螃蟹的人coinsrore.com
    新车新盘 嘎嘎稳 嘎嘎靠谱coinsrore.com
    新车首发,新的一年,只带想赚米的人coinsrore.com
    新盘 上车集合 留下 我要发发 立马进裙coinsrore.com
    做了几十年的项目 我总结了最好的一个盘(纯干货)coinsrore.com
    新车上路,只带前10个人coinsrore.com
    新盘首开 新盘首开 征召客户!!!coinsrore.com
    新项目准备上线,寻找志同道合 的合作伙伴coinsrore.com
    新车即将上线 真正的项目,期待你的参与coinsrore.com
    新盘新项目,不再等待,现在就是最佳上车机会!coinsrore.com
    新盘新盘 这个月刚上新盘 新车第一个吃螃蟹!coinsrore.com

    oefuinhyaf October 7th, 2025 at 05:55 pm回复