javascript - 使用 Vue 强制下载

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 无法识别它，Chrome 和 Firefox 将忽略跨域请求 ( CanIUse )。由于您要链接到其他站点的资源，因此即使在支持该属性的浏览器中，也无法可靠地下载 a 标记。

我不确定这是否会以不同的方式工作，但为了避免直接链接到 API，您可以尝试从 API 下载 Blob。有一个issue Github 上介绍了如何执行此操作。我稍微修改了其中一个答案，以创建一种您可以尝试使用的方法。

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