vue前端实现图片下载，实现点击按钮弹出本地窗口，选择自定义保存路径
时间：2024-04-01 15:50:41 来源：网络cs 作者：纳雷武 栏目：卖家故事 阅读：
阅读本书更多章节>>>>
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", ]; function downloadIamge(imgsrc, name) { let image = new Image(); 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 = new MouseEvent("click"); a.download = name || "photo"; a.href = url; a.dispatchEvent(event); }; image.src = imgsrc; } function WriteToFile(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); } } function fn1() { for (let i = 0; i < arr.length; i++) { downloadIamge(arr[i]); } } </script> </body></html>二、别找代码了，不用代码就可以实现
以下按照步骤一步一步来
按照红色箭头所指，用鼠标戳它
恭喜你，功能完成了
本文链接：https://www.kjpai.cn/gushi/2024-04-01/152133.html，文章来源：网络cs，作者：纳雷武，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。