a标签download无效解决办法

a标签download无效解决办法

在开发时遇到要下载附件的需求，当时想到直接a标签herf里填上链接不就行了么。结果发现当附件是txt或者jpg等，这种浏览器可以直接打开文件类型时，浏览器会直接打开，不会下载。

那我们自然而然就想到了download属性，结果download下载文件有个前提…必须是同源的文件。这就很蛋疼。所以我就写了个点击事件，如下

<a @click="downloadFile(url, name)">附件下载</a>

url传文件下载路径
name就是给下载的文件起个名字

downloadFile(url, label) {
 axios.get(url, { responseType: "blob" }).then(response => {
   const blob = new Blob([response.data]);
   const link = document.createElement("a");
   link.href = URL.createObjectURL(blob);
   link.download = label;
   link.click();
   URL.revokeObjectURL(link.href);
 }).catch(console.error);
},

这样就OK了！
注意我这里用到了axios，大家要提前去下载依赖，并在当前页面引用。