教你一招，快速用a标签下载图片或文件

教你一招，快速用a标签下载图片或文件

第一种方式：

设置 a 标签的 download 属性，可以指定图片或文件名。如下代码：

<a target="_blank" href='http://127.0.0.1:8080/file.xlsx' download='file.xlsx'>下载文件</a>
<a target="_blank" href='http://127.0.0.1:8080/img.png' download='img.png'>下载图片</a>

这种写法有个前提，href 的下载地址和当前网站地址必须是同源的，否则download不生效。

注意：同源要满足两个条件。

1. 域名相同，也就是IP地址相同。
2. 端口号相同。

第二种方式：

无需满足同源的前提，自己封装一个 download 方法，点击下载的时候调用该方法即可。

const download = (url, fileName) => {
    const x = new window.XMLHttpRequest();
    x.open('GET', url, true);
    x.responseType = 'blob';
    x.onload = () => {
        const url = window.URL.createObjectURL(x.response);
        const a = document.createElement('a');
        a.href = url;
        a.download = fileName;
        a.click();
    };
    x.send();
}

<a target="_blank" @click="download('http://www.demo.com/file.xlsx', 'file.xlsx')">下载</a>