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 =newImage();// 解决跨域 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 =newMouseEvent("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);}));}