Question

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

这个问题更特定于HTML 5“下载”以及：href的VUE绑定，以及为什么它不能阻止默认浏览器在新标签页中打开文件的行为。

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

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

例外：在新标签中仅打开图像，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

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

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

这为 IMO 提供了更好的用户体验，但在尝试访问受授权保护的内容时设置起来很棘手。为此，您需要将授权存储在 cookie 中，而不是依赖于将授权标头存储在浏览器的本地存储中。这将需要配置您的服务器和客户端以通过这种方式进行身份验证。

要在客户端执行此操作，请确保 axios 知道存储凭据：

import axios from 'axios'
axios.defaults.withCredentials = true

要在服务器端执行此操作取决于您使用的服务器。

Answer 2

一种避免CORS问题的更简单的方法是通过XHR请求获取文件并将文件作为blob提供：

模板

<a @click.prevent="downloadItem(item.url)" :href="item.url">
  Download
</a>

Vue

methods: {
  downloadItem (url) {
    Axios.get(url, { responseType: 'blob' })
      .then(({ data }) => {
        let blob = new Blob([data], { type: 'image/png' })
        let link = document.createElement('a')
        link.href = window.URL.createObjectURL(blob)
        link.download = 'image.png'
        link.click()
      .catch(error => {
        console.error(error)
      })
    })
  }
}

我以Axios为例，但是您应该可以使用所需的任何lib。另外请注意，为简单起见，blob的mime类型和下载名称都是硬连线的。

Answer 3

我正在使用 Laravel 和 Vue。随着https://github.com/maatwebsite/Laravel-Excel

在 Laravel 路由中

在下载的控制器方法中，我返回https://docs.laravel-excel.com/3.1/exports/exportables.html -> 负责实例

Route::get('users/download', 'userController@download')
->name('users.download');

在我的 Vue 中：

<!--
  - Page Header Template
  -->
<template>
    <div class="page-header">
        <button 
            v-if="$is_admin"
            class="button secondary download" @click="download">Download
        </button>
    </div>
</template>

<script>
    export default {

        methods: {
            download () {
                const url = '/users/download';
                window.location.href = url;
            }
        },
    };
</script>

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

3 个答案: