前两天做的一个文件下载，使用文件存储地址url去下载，不需要打开文件。使用新建a标签，触发点击事件来进行下载。
downloadNormalFile(src, filename) { var link = document.createElement('a'); link.setAttribute("download", filename); link.href = src; document.body.appendChild(link);//添加到页面中，为兼容Firefox浏览器 link.click(); document.body.removeChild(link);//从页面移除 },
新建a标签，设置href为文件存储地址，添加html5的新属性download，然后触发a标签的click事件即可。但是在火狐浏览器中a标签需要添加到页面中才能触发事件下载。所以添加到body中后又移除。
上面是通常情况下的做法，我遇到一个问题，在chrome浏览器中当文件是图片时，浏览器不会下载，而是打开图片链接显示。网上查找了很多方法，采用将utl转换为base64格式，然后触发下载，这样浏览器不会自动识别url打开显示。
ImgtodataURL(url, filename, fileType) { this.getBase64(url, fileType, (_baseUrl) => { // 创建隐藏的可下载链接 var eleLink = document.createElement('a'); eleLink.download = filename; eleLink.style.display = 'none'; // 图片转base64地址 eleLink.href = _baseUrl; // 触发点击 document.body.appendChild(eleLink); eleLink.click(); // 然后移除 document.body.removeChild(eleLink); }); }, getBase64(url, fileType, callback) { //通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片 var Img = new Image(), dataURL = ''; Img.src = url; Img.setAttribute("crossOrigin", 'Anonymous'); Img.onload = function () { //要先确保图片完整获取到，这是个异步事件 var canvas = document.createElement("canvas"), //创建canvas元素 width = Img.width, //确保canvas的尺寸和图片一样 height = Img.height; canvas.width = width; canvas.height = height; canvas.getContext("2d").drawImage(Img, 0, 0, width, height); //将图片绘制到canvas中 dataURL = canvas.toDataURL('image/' + fileType); //转换图片为dataURL callback ? callback(dataURL) : null; }; }
getbase64采用canvas绘制图片后采用callback方法调用异步加载onload方法获取到的dataurl，然后再新建a标签触发下载。
到上一步，基本解决了问题，但是在Edge浏览器中，下载图片报错了。
SCRIPT5022: SecurityError
因为在Edge中浏览器用户代理值为：
包含chrome，所以在判断浏览器的时候将Edge浏览器也判断为了chrome浏览器，执行了getbase64转换了url。故作判断时需要排除这种情况。
isImageInChromeNotEdge(fType) { let bool = false; if (window.navigator.userAgent.indexOf("Chrome") !== -1 && window.navigator.userAgent.indexOf("Edge") === -1) (fType === "jpg" || fType === "gif" || fType === "png" || fType === "bmp" || fType === "jpeg" || fType === "svg") && (bool = true); return bool; },
最后从获取到url后下载的操作完整代码为：
download(src,row){ //row.ITEMNAME为文件名称，src为文件存储地址
if (this.isImageInChromeNotEdge(fType)) {//判断是否为chrome里的图片
this.ImgtodataURL(src, row.ITEMNAME, fType);
} else {
this.downloadNormalFile(src, row.ITEMNAME);
}
},
isImageInChromeNotEdge(fType) {
let bool = false;
if (window.navigator.userAgent.indexOf("Chrome") !== -1 && window.navigator.userAgent.indexOf("Edge") === -1)
(fType === "jpg" || fType === "gif" || fType === "png" || fType === "bmp" || fType === "jpeg" || fType === "svg") && (bool = true);
return bool;
},
downloadNormalFile(src, filename) {
var link = document.createElement('a');
link.setAttribute("download", filename);
link.href = src;
document.body.appendChild(link);//添加到页面中，为兼容Firefox浏览器
link.click();
document.body.removeChild(link);//从页面移除
},
ImgtodataURL(url, filename, fileType) {
this.getBase64(url, fileType, (_baseUrl) => {
// 创建隐藏的可下载链接
var eleLink = document.createElement('a');
eleLink.download = filename;
eleLink.style.display = 'none';
// 图片转base64地址
eleLink.href = _baseUrl;
// 触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
});
},
getBase64(url, fileType, callback) {
//通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片
var Img = new Image(),
dataURL = '';
Img.src = url;
Img.setAttribute("crossOrigin", 'Anonymous');
Img.onload = function () { //要先确保图片完整获取到，这是个异步事件
var canvas = document.createElement("canvas"), //创建canvas元素
width = Img.width, //确保canvas的尺寸和图片一样
height = Img.height;
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(Img, 0, 0, width, height); //将图片绘制到canvas中
dataURL = canvas.toDataURL('image/' + fileType); //转换图片为dataURL
callback ? callback(dataURL) : null;
};
}