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

剪刀石头布啊2024-06-15 22:39

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

如下所示，我们实现文件下载，然后使用 a 标签实现保存到本地(实际上做了个另存为的功能)，否则直接给定 url 直接下载即可

js 复制代码

import request from 'umi-request';

export const downloadWithUrl = (urlString: string, filename?: string) => {
    const aLink = document.createElement('a');
    request
        .get(urlString, {
            responseType: 'blob', //设置响应的数据类型为一个包含二进制数据的 Blob 对象，必须设置！！！
        })
        .then((res) => {
            if (res) {
                const url = URL.createObjectURL(new Blob([res]));
                const urlFilename = urlString.split('/').at(-1);
                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，使用特定组件直接显示，antd图片默认支持，也可以使用下面的操作，需要注意的是，url本身访问默认是预览，而不是下载(一些可能需要上传时设置type为image的minetype类型)，这个操作是浏览器自带的，仅仅支持图片，不支持其他文件，其他文件预览需要自己加功能了，想做的详细，那么就分类型处理显示的问题了

js 复制代码

window.open(url, '_blank');