react实现文件下载和预览图片

平时开发中又下载文件的，我们会根据url下载下来，然后重命名成我们的原始名字，这是比较符合我们原始需求的，因此我们需要先通过请求下载下来二进制图片信息，然后通过 a 标签实现下载功能

如下所示，我们实现文件下载，然后使用 a 标签实现保存到本地(实际上这里相当于做了个下载后另存为的功能，默认的下载如果文件没有填写content-disposition，那么文件名可能不像我们想象的那样)，否则直接给定 url 直接下载即可

export const downloadWithUrl = (urlString: string, filename?: string) => {
    //请求使用 fetch、XMLHttpRequest 都可以
    fetch(urlString)
        .then((res) => res.blob())
        .then((res) => {
            if (res) {
                //通过blob创建url，相当于url指向了 blob这边内存空间
                const url = URL.createObjectURL(res);
                const urlFilename = urlString.split("/").at(-1);
                const aLink = document.createElement("a");
                aLink.download = filename
                    ? filename
                    : urlFilename
                    ? urlFilename
                    : new Date().getTime().toString();
                aLink.style.display = "none";
                aLink.href = url;
                document.body.appendChild(aLink);
                aLink.click();
                document.body.removeChild(aLink);
                URL.revokeObjectURL(url); //释放url指向的 blob 内存空间
            }
        });
}

图片预览也比较常见，我们可以直接通过 url，使用特定组件直接显示，antd 图片默认支持，也可以使用下面的操作，需要注意的是，url本身访问默认是预览，而不是下载(一些可能需要上传时设置type为image的minetype类型)，这个操作是浏览器自带的，仅仅支持图片，不支持其他文件，其他文件预览需要自己加功能了，想做的详细，那么就分类型处理显示的问题了

//一些minetype为image的支持预览，其他类型的则是直接下载
window.open(url, '_blank');

平时 FileSaver 三方库保存文件用的比较多，想多了解相关的阿宝哥讲的的 FileSaver 就挺好的

如果就想简单些，我上面的操作也挺好的，简单舒适