【JavaScript】点击按钮下载图片功能封装，带uuid唯一标识

点击按钮下载图片功能封装，带uuid唯一标识

// 公共的工具类
import { v4 as uuidv4 } from "uuid";

// 下载图片
export const downloadPic = (imgUrl) => {
  const uuid = uuidv4(); // 生成一个唯一标识名称
  const extension = getImageExtension(imgUrl); // 获取图片后缀
  const xmlHttp = new XMLHttpRequest(); // 创建一个xmlhttp请求
  xmlHttp.open("GET", imgUrl, true);
  xmlHttp.responseType = "blob"; // 返回的数据类型
  xmlHttp.onload = function () {
    if (this.status == 200) {
      const blob = this.response;
      const a = document.createElement("a");
      a.id = "downloadPic"; // 给标签弄唯一标识这里处理删除新建标签
      a.href = window.URL.createObjectURL(blob); // 将blob流存进地址
      a.download = `${uuid + "." + extension}`; // 唯一标识+文件后缀
      document.body.appendChild(a);
      a.click();
      // 删除刚新生成的标签
      const elementToDelete = document.getElementById("downloadPic");
      elementToDelete.parentNode.removeChild(elementToDelete);
    }
  };
  xmlHttp.send();
};
// 获取图片的后缀名
function getImageExtension(url) {
  var parts = url.split(".");
  return parts[parts.length - 1];
}