vue前端实现前端下载,并实现点击按钮弹出本地窗口，选择自定义保存路径
一、实现下载
二、实现自定义保存路径
直接上代码，废话不多说，点关注，不迷路
一、下载代码
<!DOCTYPE html><html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title></title><meta name="description" content=""/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href=""/></head><body><a onclick="fn1()" style="cursor: pointer">aaaaaaa</a><script>var arr =["https://img0.baidu.com/it/u=4162443464,2854908495&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",];functiondownloadIamge(imgsrc, name){let image =newImage();
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");let a = document.createElement("a");let event =newMouseEvent("click");
a.download = name ||"photo";
a.href = url;
a.dispatchEvent(event);};
image.src = imgsrc;}functionWriteToFile(sText){with(document){
ir =createElement("iframe");
ir.id ="ifr";
ir.location ="about:blank";
ir.style.display ="none";
body.appendChild(ir);with(getElementById("ifr").contentWindow.document){open();write(sText);close();if(document.compatMode && document.all){execCommand("SaveAs",false,".txt");}else{
location ="data:application/rtf,"+encodeURIComponent(sText);}}setTimeout(function(){
body.removeChild(ir);},1000);}}functionfn1(){for(let i =0; i < arr.length; i++){downloadIamge(arr[i]);}}</script></body></html>
二、别找代码了，不用代码就可以实现
以下按照步骤一步一步来
按照红色箭头所指，用鼠标戳它
恭喜你，功能完成了
本文转载自: https://blog.csdn.net/m0_71585401/article/details/131193969
版权归原作者 秋石兰 所有， 如有侵权，请联系我们删除。
版权归原作者 秋石兰 所有， 如有侵权，请联系我们删除。