根据url下载图片

124 阅读1分钟

单个图片下载实现

  1. a标签的download属性
  2. URL.createObjectURL和URL.revokeObjectURL(url);
export const downloadImg = async (href: string, fileName?: string) => {
  return fetch(href)
    .then((res) => res.blob())
    .then((blob) => {
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = fileName || `img_${Date.now()}`;
      a.click();
      URL.revokeObjectURL(url);
    })
};

调用

// 根据后端返回的url下载图片
  const downloadImages = useCallback(async () => {
    if (!images?.length) {
      message.warning('暂无图片可复制');
      return;
    }
    for (let i = 0; i < images.length; i++) {
      try {
        await downloadImg(images[i]);
      } catch (error) {
        message.error('下载失败, 请重试或点击【复制凭证图】');
      }
    }
  }, [images]);

参考: blog.csdn.net/quhongqiang…