js模拟元素点击事件以及下载网络资源文件方法乱炖

2019-6-20 Jon js+jquery+ajax

一、a标签的download下载功能
只能下载本地文件即同一个域名的文件（base64位图片地址也是属于本地地址）如
<a href="/images/logo.png" download="logo">
若是其它域名下的文件则无法下载会直接打开如
<a href="http://yuanqiao.pw/images/logo.png" download="logo">
兼容性
浏览器兼容版本目前最新版本
Chrome 14.0 >74
Firefox 20.0 >67
Safari 10.1 >12.1
Opera 15.0 >60
IE 不支持 11&Edge
一般进行真实业务开发，目前不建议直接使用a标签加download，除非明确表示不用兼容ie并且下载资源是同域名下的，或者判断是ie则使用别的方式下载。

二、使用Location.href或者window.open('url') 下载
location.href = 'http://xxx.com/aaa.zip';
location可以下载无法在浏览器直接打开的文件，比如.zip/.csv等
但是若是css、图片、js等就无法下载了

三、js下载图片base64为数据流文件兼容性解决方案

var dbData = '你的base64图片数据流';
// 如果是ie 不支持download 则使用msSaveOrOpenBlob
if('msSaveOrOpenBlob' in navigator){
  // 根据base64 内容 取得 图片 bolb
  // 去掉url的头，并转换为byte
  let bytes = window.atob(dbData.split(',')[1]);
  //处理异常,将ascii码小于0的转换为大于0
  let ab = new ArrayBuffer(bytes.length);
  let ia = new Uint8Array(ab);
  for (let i = 0; i < bytes.length; i++) {
    ia[i] = bytes.charCodeAt(i);
  }
  let $Blob = new Blob( [ab] , {type : 'image/png'});
  window.navigator.msSaveOrOpenBlob($Blob, 'download');
}else{
  let link = document.createElement('a');
  link.href = dbData;
  link.download = "download";
  document.body.appendChild(link);
  // 低版本的Safari/Chrome 不支持非input/button以外的元素click事件
  if(link.click){
    link.click();
  }else{
    var evt = document.createEvent("MouseEvents");
    evt.initEvent("click", true, true);
    link.dispatchEvent(evt);
  }
  document.body.removeChild(link);
}

四、自动触发 .click() 方法
兼容性：低版本的Safari/Chrome 不支持非input/button以外的元素click事件
element.onclick = function() {
alert('被点击');
};
// 如果是在js里面创建的元素火狐和ie/Edge需要document.body.appendChild(element);不然无效
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
注意：虽然所有浏览器都支持.click()触发点击按钮事件，但是ie浏览器不支持download，所以无法通过download实现ie浏览器下载文件。

五、document.createEvent
let element = document.createElement('a');
// 创建的元素 ie/Edge需要document.body.appendChild(element);不然无效
// 注意这里火狐不加这句代码也是可以的
document.body.appendChild(link);
兼容性，不小于ie9
var ev = document.createEvent('HTMLEvents');
ev.initEvent('click', false, true);
element.dispatchEvent(ev);

六、document.all

if(document.all){
  // 只有ie浏览器才会进入（Edge不会进入）
}

所以网上比较常见的代码如下

if (document.all) {
  // For IE
  element.click();
} else if (document.createEvent) {
  //FOR DOM2
  var ev = document.createEvent('HTMLEvents');
  ev.initEvent('click', true, true);
  element.dispatchEvent(ev);
}

在Edge中是完全没有必要的
若元素没有被append到body中，Edge是不支持的
若元素已经在body中则哪个方法都是好用的
正确的写法应该是如果动态创建的element元素

document.body.appendChild(element);
if(element.click){
  element.click();
}else{
  var ev = document.createEvent('HTMLEvents');
  ev.initEvent('click', true, true);
  element.dispatchEvent(ev);
}
document.body.removeChild(element);
// 如果element已经存在dom文档中则直接
if(element.click){
  element.click();
}else{
  var ev = document.createEvent('HTMLEvents');
  ev.initEvent('click', true, true);
  element.dispatchEvent(ev);
}

推荐使用上述组合使用click()和createEvent()，这样可以提高兼容性及健壮性。

七、click()和createEvent()区别
click()用于模拟元素上的鼠标单击。
element.click();
createEvent()事件方法，可以定义想要的各种事件
然后通过元素去触发比如click事件
ar ev = document.createEvent('HTMLEvents');
ev.initEvent('click', true, true);
element.dispatchEvent(ev);

八、js通过文件链接下载文件
如果想用js下载任意连接文件如图片,css,js等暂无方法
只能使用后端语言写个接口，前端调用下

标签: 模拟点击