vue 前端根据 文件路径/图片路径 url 下载文件

点击全文阅读

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);        }));}

点击全文阅读