JS 点击下载按钮之后实现文件和图片的下载

JS 点击下载按钮之后实现文件的下载

function funDownload(url:string){

  var iframe = document.createElement("iframe")

  iframe.style.display = "none";

  iframe.src = url;

  document.body.appendChild(iframe);

}

点击下载按钮执行的函数：

const download=(item:any)=>{

    funDownload(`${item.url}`)

    console.log('按钮被点击了')

  }

JS实现图片的下载：

function downloadIamge(imgsrc: string, name: string) { //下载图片地址和图片名

    let image = new Image();

    // 解决跨域 Canvas 污染问题

    image.setAttribute("crossOrigin", "anonymous");

    image.onload = function () {

      let canvas = document.createElement("canvas");

      canvas.width = image.width;

      canvas.height = image.height;

      let context = canvas.getContext("2d");

      context?.drawImage(image, 0, 0, image.width, image.height);

      let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据

      let a = document.createElement("a"); // 生成一个a元素

      let event = new MouseEvent("click"); // 创建一个单击事件

      a.download = name || "photo"; // 设置图片名称

      a.href = url; // 将生成的URL设置为a.href属性

      a.dispatchEvent(event); // 触发a的单击事件

    };

    image.src = imgsrc;

  }

点击下载按钮之后执行这个函数downloadIamge，第一个参数是图片的地址，第二个参数是图片下载之后的图片名称