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端，手机端 效果挺好 没有这么多细节
 对于系统来说能解析的 就可以直接预览，不能解析的 会弹框下载