js前端 下载文件评估

前端下载文件。
亲测。
欢迎补充和纠正.

• 第一种 在线地址 a标签 download
• PC端效果

	a标签 不加download
	  pdf 直接预览
	  png 直接预览
	  doc,xls,ppt 弹框下载
	a标签 加download
	  注：href地址必须是和网页同源资源，否则download失效，效果和不加download一样
	   pdf,png,doc,xls,ppt 弹框下载

• 手机端效果

谷歌模拟器
	 a标签不加download
	   pdf 无效
	   png直接预览
	   doc,xls,ppt 弹框下载
	 a标签 加download
	   注：href地址必须是和网页同源资源，否则download失效，效果和不加download一样
	   pdf,png,doc,xls,ppt 弹框下载
安卓：
	 微信浏览器
	   a标签 不加download
	     png直接预览
	     pdf,doc,xls,ppt 弹框下载
	   a标签 加download
	     pdf,png,doc,xls,ppt 失效
	 手机浏览器
	   a标签 (无论加不加download,手机能解析的例如图片 就可以直接预览，不能解析的 会弹框下载)
	   png直接预览
	   pdf,doc,xls,ppt 弹框下载
ios：
	对于ios系统来说，都可以预览 不管download 加不加

• 第二种 请求blob文件流 a标签下载

function download(url) {
  var xmlhttp;
  xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", url, true);
  xmlhttp.responseType = "blob";
  xmlhttp.onload = function (res) {
    if (this.status == 200) {
      downloadfile(this.response, '')
    }
  }
  xmlhttp.send();
}

function downloadfile(content, filename) {
  // var blob = new Blob([content], {
  //   type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  // });
  var blob = content
  if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(blob, filename);
  } else {
    var eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none';
    eleLink.href = URL.createObjectURL(blob);
    document.body.appendChild(eleLink);
    eleLink.click();
    document.body.removeChild(eleLink);
    window.URL.revokeObjectURL(eleLink.href);
  }
}

• PC端效果 (blob流下载必须加 downlaod)

pdf,png,doc,xls,ppt 弹框下载

• 手机端效果（blob下载在手机端上，是最失望的做法）

谷歌模拟器 (blob流下载必须加 downlaod)
	pdf,png,doc,xls,ppt 弹框下载
	
微信浏览器
	(blob流下载不管加不加 都失效)
	
手机浏览器
	a标签 不加download
		pdf,png,doc,xls,ppt 失效
	a标签 加download
		下载得都是.bin文件 意味着失效

• 第三种 window.open()

window.open('在线地址')
 PC端，手机端 效果挺好 没有这么多细节
 对于系统来说能解析的 就可以直接预览，不能解析的 会弹框下载