Question

我尝试了该代码，它仅适用于doc和pptx格式的文件。如果我要下载图像，则此代码将在Google上显示一个新标签。

有人可以帮忙吗？或拥有可以帮助下载问题的代码。我想要一个可以下载所有类型文件的功能。

<a
   class="btn btn-success btn-xs"
   :href="'http://api.smartsport.site/'+props.row.url"
   target="_self"
>Download</a>

Answer 1

download属性告诉浏览器您要它下载文件，但是它并不总是有效。 Internet Explorer无法识别它，对于跨域请求（CanIUse），Chrome和Firefox将忽略它。由于您要链接到另一个站点的资源，因此即使在支持该属性的浏览器中，也无法可靠地下载a标签。

我不确定这是否会有所不同，但是为了避免直接链接到API，您可以尝试从API下载Blob。 Github上有一个issue，解决了该问题。我对答案中的一个做了一些修改，以使您可以尝试使用一种方法。

download: function(url) {
    let response = await Vue.http.get("http://api.smartsport.site/" + url, {responseType: 'arraybuffer'});
    let blob = new Blob([response.data], {type:response.headers.get('content-type')});
    let link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = this.name;
    link.click();
}

来源：https://github.com/pagekit/vue-resource/issues/285#issuecomment-359112845

Answer 2

您可以使用download属性

<a
   class="btn btn-success btn-xs"
   :href="'http://api.smartsport.site/'+props.row.url"
   download
>Download</a>

您可能要使用支持其他功能的FileSaver。

使用Vue强制下载

2 个答案: