html - Vue/HTML/JS 如何使用下载标签将文件下载到浏览器

Question

这个问题和别人提供的答案不一样，因为我的问题是针对VUE的，如果VUE也有办法阻止默认的方法。

这个问题更具体地针对 HTML 5“下载”以及 :href 的 VUE 绑定(bind)，以及为什么它无法阻止在新选项卡中打开文件的默认浏览器行为。

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

实际行为:在新选项卡中打开文件

异常:只有图像、pdf 和浏览器兼容的文件在新选项卡中打开，其他文件(如 .exe)正常下载 - 这是为什么，可以在 html 中更改此行为吗？

添加target="_blank"并不能解决问题

<a :href="downloadById(item.url)" download>Download</a>

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

Chrome 最近弃用了用于跨域下载的下载标签表单。 vue 是否有修饰符来防止这种默认情况？有没有其他方法可以用 javascript 或 html 下载文件？

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

我相信他们一定是从 URL 下载文件的更简洁的解决方案，这是一个微不足道的问题，希望有一个简单的解决方案。

谢谢。

Answer 1

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

模板

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

Vue

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 类型是硬连线的。