通过window.open使用url下载文件和download属性

优化浏览器下载体验：避免弹窗的方法

转载已于 2022-09-15 09:43:48 修改 · 7k 阅读

5 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/AAyyy1/article/details/123358260

文章标签：

#javascript #前端 #html

于 2022-09-15 09:42:52 首次发布

JavaScript学习专栏收录该内容

26 篇文章

订阅专栏

本文探讨了如何通过JavaScript避免浏览器弹窗来实现文件下载，对比了使用`window.open()`和创建隐藏`<a>`标签两种方法，后者能提供更好的用户体验，避免弹出新窗口。

一开始使用window.open(url)

  open = (filePath) => {//filePath:文件路径
    window.open(filePath)
  }

但是这样总会浏览器上弹个框感觉体验不太好

换了一个方法就不会弹框完成下载

test = (filePath, name) => {//filePath:文件路径，name：文件定义名称
    const link = document.createElement('a')
    link.style.display = 'none'
    link.href = filePath
    // link.setAttribute(
    //   'download',
    //   name
    // )
    document.body.appendChild(link)
    link.click()
  }