IT评测·应用市场-qidao123.com

标题: vue 前端根据 文件路径/图片路径 url 下载文件 [打印本页]

---

作者: 莫张周刘王    时间: 2024-6-9 15:03
标题: vue 前端根据 文件路径/图片路径 url 下载文件
1 -vue 前端根据 文件路径url 下载文件

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

复制代码

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

1. downloadFile(row) {
3.     var image = new Image();
5.     // 解决跨域 Canvas 污染问题
7.     image.setAttribute("crossOrigin", "anonymous");
9.     image.onload = function() {
10.         var canvas = document.createElement("canvas");
12.         canvas.width = image.width;
14.         canvas.height = image.height;
16.         var context = canvas.getContext("2d");
18.         context.drawImage(image, 0, 0, image.width, image.height);
20.         var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
22.         var a = document.createElement("a"); // 生成一个a元素
24.         var event = new MouseEvent("click"); // 创建一个单击事件
26.         a.download = row.fileName || "photo"; // 设置图片名称
28.         a.href = url; // 将生成的URL设置为a.href属性
30.         a.dispatchEvent(event); // 触发a的单击事件
32.     }
33.     image.src = row.fileUrl;
35. },
37. 或者
38. downloadImg(){
39.     var filename = this.fileName || '分享码';
40.     fetch(this.qrUrl).then(res => res.blob().then(blob => {
41.           var a = document.createElement('a');
42.           var url = window.URL.createObjectURL(blob);
43.           a.href = url;
44.           a.download = filename;
45.           a.click();
46.           window.URL.revokeObjectURL(url);
47.         }));
49. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)

Powered by Discuz! X3.4