关于vue.js：Vue / HTML / JS如何使用下载标记将文件下载到浏览器


Vue/HTML/JS how to download a file to browser using the download tag

此问题与提供的其他答案不同，因为我的问题集中在VUE上，并且VUE是否也有办法阻止默认方法。

这个问题更具体地是针对HTML 5"下载"以及：href的VUE绑定，以及为什么它不能阻止默认浏览器在新选项卡中打开文件的行为。

预期的行为：将文件下载到浏览器

实际行为：在新标签页中打开文件

例外：在新选项卡中仅打开图像，pdf和浏览器兼容文件，正常下载其他文件(如.exe)-为什么这样做，可以在html中更改此行为吗？

添加target =" _ blank"不能解决问题

1
Download

单击上面的链接时，将在新的浏览器选项卡中打开文件，我需要防止这种默认行为，并在单击后强制下载。 HTML 5标签"下载"被认为可以解决此问题，但似乎不起作用。

Chrome最近不推荐使用跨域下载的下载标签表单。 vue是否有修饰符来防止此默认设置？还有其他方法可以使用javascript或html下载文件吗？

一种建议的解决方案是将URL读取为arrayBuffer，然后在DOM中创建一个新的blob，然后创建一个anchor元素，然后单击它。。但这似乎很难强制下载文件。

我确信他们必须是一种更干净的解决方案，以便从URL下载文件，这是一个小问题，希望有一个简单的解决方案。

谢谢。

相关讨论

您可以将文件作为blob提取并提供相同的方式，不会有导致CORS问题的请求。

模板

1
2
3
4
<a
  :href="item.url"
  v-text="item.label"
  @click.prevent="downloadItem(item)" />

Vue

1
2
3
4
5
6
7
8
9
10
11
12
13
methods: {
  downloadItem ({ url, label }) {
    Axios.get(url, { responseType: 'blob' })
      .then(response => {
        const blob = new Blob([response.data], { type: 'application/pdf' })
        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = label
        link.click()
        URL.revokeObjectURL(link.href)
      }).catch(console.error)
  }
}

注意：我以Axios为例，但这不是必需的，为了简单起见，blob的mime类型是硬连线的。

相关讨论

如果您希望浏览器处理下载而不是使用JavaScript处理下载，则需要使用window.open：

1
window.open("<insert URL here>")

这给IMO带来了更好的用户体验，但是在尝试访问受授权保护的内容时很难设置。为此，您需要将授权存储在cookie中，而不是依赖于将授权标头存储在浏览器的本地存储中。这将需要配置服务器

相关讨论