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，第一个参数是图片的地址，第二个参数是图片下载之后的图片名称
