下载图片按钮的实现

下载图片按钮的实现

问题描述

业务需求：点击按钮下载图片到本地

解决方案

方案一：
直接使用 a 标签，利用 download 属性；

<a href='https://xxxxx.png' download='download'><a/>

download 属性指的是支持下载，赋值为下载名，但是这个方法只支持同源下的图片，遇到跨域的图片，会进行跳转；

方案二：
巧用 a 标签，用 js 实现，关键代码如下：

<li onClick={downloadFile} className={style.download}></li>

// 下载图片，建议提供一个公共方法来
const downloadFile = useCallback(() => {
    const x = new XMLHttpRequest();
    x.open('GET', imgUrl, true);
    x.responseType = 'blob';
    x.onload = function () {
        const imgUrl = window.URL.createObjectURL(x.response);
        const a = document.createElement('a');
        a.href = imgUrl;
        a.download = 'download';
        a.click();
    };
    x.send();
}, [imgUrl]);