1 -vue 前端根据 文件路径url 下载文件

downloadFile(row){ var a = document.createElement('a') // 创建一个<a></a>标签 a.href = row.fileUrl //重点（如测试发现下载文件不存在/找不到，检查路径） a.download = row.fileName // 设置下载文件文件名 a.style.display = 'none' // 隐藏a标签 document.body.appendChild(a) // 将a标签追加到文档对象中 a.click() // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了 a.remove()},

2 -vue 前端根据 图片url 下载图片

downloadFile(row) { var image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttribute("crossOrigin", "anonymous"); image.onload = function() { var canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; var context = canvas.getContext("2d"); context.drawImage(image, 0, 0, image.width, image.height); var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据 var a = document.createElement("a"); // 生成一个a元素 var event = new MouseEvent("click"); // 创建一个单击事件 a.download = row.fileName || "photo"; // 设置图片名称 a.href = url; // 将生成的URL设置为a.href属性 a.dispatchEvent(event); // 触发a的单击事件 } image.src = row.fileUrl;},或者downloadImg(){ var filename = this.fileName || '分享码'; fetch(this.qrUrl).then(res => res.blob().then(blob => { var a = document.createElement('a'); var url = window.URL.createObjectURL(blob); a.href = url; a.download = filename; a.click(); window.URL.revokeObjectURL(url); }));}