• 如何在React中实现文件下载和图片预览功能?
  • 发布于 2个月前
  • 178 热度
    0 评论
平时开发中又下载文件的,我们会根据url下载下来,然后重命名成我们的原始名字,这是比较符合我们原始需求的,因此我们需要先通过请求下载下来二进制图片信息,然后通过 a 标签实现下载功能。如下所示,我们实现文件下载,然后使用 a 标签实现保存到本地(实际上做了个另存为的功能),否则直接给定 url 直接下载即可:
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类型),这个操作是浏览器自带的,仅仅支持图片,不支持其他文件,其他文件预览需要自己加功能了,想做的详细,那么就分类型处理显示的问题了
window.open(url, '_blank');
用户评论