Go语言视频零基础入门到精通

admin

前两天做的一个文件下载，使用文件存储地址url去下载，不需要打开文件。使用新建a标签，触发点击事件来进行下载。

1. downloadNormalFile(src, filename) {
2.                 var link = document.createElement("a");
3.                 link.setAttribute("download", filename);
4.                 link.href = src;
5.                 document.body.appendChild(link);//添加到页面中，为兼容Firefox浏览器
6.                 link.click();
7.                 document.body.removeChild(link);//从页面移除
8.             },

复制代码

新建a标签，设置href为文件存储地址，添加HTML5的新属性download，然后触发a标签的click事件即可。但是在火狐浏览器中a标签需要添加到页面中才能触发事件下载。所以添加到body中后又移除。

---

  
上面是通常情况下的做法，我遇到一个问题，在chrome浏览器中当文件是图片时，浏览器不会下载，而是打开图片链接显示。网上查找了很多方法，采用将utl转换为base64格式，然后触发下载，这样浏览器不会自动识别url打开显示。

1. ImgtodataURL(url, filename, fileType) {
2.                 this.getBase64(url, fileType, (_baseUrl) => {
3.                     // 创建隐藏的可下载链接
4.                     var eleLink = document.createElement("a");
5.                     eleLink.download = filename;
6.                     eleLink.style.display = "none";
7.                     // 图片转base64地址
8.                     eleLink.href = _baseUrl;
9.                     // 触发点击
10.                     document.body.appendChild(eleLink);
11.                     eleLink.click();
12.                     // 然后移除
13.                     document.body.removeChild(eleLink);
14.                 });
16.             },
17.             getBase64(url, fileType, callback) {
18.                 //通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片
19.                 var Img = new Image(),
20.                     dataURL = "";
21.                 Img.src = url;
22.                 Img.setAttribute("crossOrigin", "Anonymous");
23.                 Img.onload = function () { //要先确保图片完整获取到，这是个异步事件
24.                     var canvas = document.createElement("canvas"), //创建canvas元素
25.                         width = Img.width, //确保canvas的尺寸和图片一样
26.                         height = Img.height;
27.                     canvas.width = width;
28.                     canvas.height = height;
29.                     canvas.getContext("2d").drawImage(Img, 0, 0, width, height); //将图片绘制到canvas中
30.                     dataURL = canvas.toDataURL("image/" + fileType); //转换图片为dataURL
31.                     callback ? callback(dataURL) : null;
32.                 };
33.             }

复制代码

getbase64采用canvas绘制图片后采用callback方法调用异步加载onload方法获取到的dataurl，然后再新建a标签触发下载。
  

---

  
到上一步，基本解决了问题，但是在Edge浏览器中，下载图片报错了。
SCRIPT5022: SecurityError
  
因为在Edge中浏览器用户代理值为：

包含chrome，所以在判断浏览器的时候将Edge浏览器也判断为了chrome浏览器，执行了getbase64转换了url。故作判断时需要排除这种情况。

1. isImageInChromeNotEdge(fType) {
2.                 let bool = false;
3.                 if (window.navigator.userAgent.indexOf("Chrome") !== -1 && window.navigator.userAgent.indexOf("Edge") === -1)
4.                     (fType === "jpg" || fType === "gif" || fType === "png" || fType === "bmp" || fType === "jpeg" || fType === "svg") && (bool = true);
5.                     return bool;
6.             },

复制代码

最后从获取到url后下载的操作完整代码为：

1. 　　　　download(src,row){    //row.ITEMNAME为文件名称，src为文件存储地址            
2. 　　　　　　　　if (this.isImageInChromeNotEdge(fType)) {//判断是否为chrome里的图片
3.                     this.ImgtodataURL(src, row.ITEMNAME, fType);
4.                 } else {
5.                     this.downloadNormalFile(src, row.ITEMNAME);
6.                 }
7.             },
8.             isImageInChromeNotEdge(fType) {
9.                 let bool = false;
10.                 if (window.navigator.userAgent.indexOf("Chrome") !== -1 && window.navigator.userAgent.indexOf("Edge") === -1)
11.                     (fType === "jpg" || fType === "gif" || fType === "png" || fType === "bmp" || fType === "jpeg" || fType === "svg") && (bool = true);
12.                     return bool;
13.             },
14.             downloadNormalFile(src, filename) {
15.                 var link = document.createElement("a");
16.                 link.setAttribute("download", filename);
17.                 link.href = src;
18.                 document.body.appendChild(link);//添加到页面中，为兼容Firefox浏览器
19.                 link.click();
20.                 document.body.removeChild(link);//从页面移除
21.             },
22.             ImgtodataURL(url, filename, fileType) {
23.                 this.getBase64(url, fileType, (_baseUrl) => {
24.                     // 创建隐藏的可下载链接
25.                     var eleLink = document.createElement("a");
26.                     eleLink.download = filename;
27.                     eleLink.style.display = "none";
28.                     // 图片转base64地址
29.                     eleLink.href = _baseUrl;
30.                     // 触发点击
31.                     document.body.appendChild(eleLink);
32.                     eleLink.click();
33.                     // 然后移除
34.                     document.body.removeChild(eleLink);
35.                 });
37.             },
38.             getBase64(url, fileType, callback) {
39.                 //通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片
40.                 var Img = new Image(),
41.                     dataURL = "";
42.                 Img.src = url;
43.                 Img.setAttribute("crossOrigin", "Anonymous");
44.                 Img.onload = function () { //要先确保图片完整获取到，这是个异步事件
45.                     var canvas = document.createElement("canvas"), //创建canvas元素
46.                         width = Img.width, //确保canvas的尺寸和图片一样
47.                         height = Img.height;
48.                     canvas.width = width;
49.                     canvas.height = height;
50.                     canvas.getContext("2d").drawImage(Img, 0, 0, width, height); //将图片绘制到canvas中
51.                     dataURL = canvas.toDataURL("image/" + fileType); //转换图片为dataURL
52.                     callback ? callback(dataURL) : null;
53.                 };
54.             }

复制代码