a标签/js下载文件的解决方案

前段时间工作多次遇到过下载文件的问题，这里做个总结。因为浏览器兼容性问题，大体分为三种解决方案。

window.open设置源文件地址

window.open("域名/template.xlsx(文件名)");

这个方法一般是后端返回的一个资源地址，它是服务器上的某个位置的静态资源。该方法没有兼容性问题，但整体体验有撕裂感，在现代浏览器不太推荐。

a标签提供下载

<a href="域名/template.xlsx(文件名)">下载文件</a>

chrome浏览器会直接下载文件，IE则会弹窗提示保存文件。

ajax + blob

function getBlob(url) {
  return new Promise(resolve => {
    const xhr = new XMLHttpRequest();

    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response);
      }
    };

    xhr.send();
  });
}

function saveAs(blob, filename) {
  if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, filename);
  } else {
    const link = document.createElement('a');

    link.href = window.URL.createObjectURL(blob);
    link.download = filename;
    link.click();

    window.URL.revokeObjectURL(link.href);
  }
}

function download(url, filename) {
  getBlob(url).then(blob => {
    saveAs(blob, filename);
  });
}

// For Example
download('https://github.com/vuejs/vue-router', 'vue-router.html');

这个方案主要使用ajax获取文件内容，转为blob，再利用a标签的点击行为触发下载，但是不管是点击事件还是blob的转换都有一定兼容性问题。

社区下载解决方案

FileSaver.js

FileSaver.js是在客户端保存文件的解决方案，非常适合在客户端生成文件的web应用程序。

// 获取当前全局对象
var _global = typeof window === 'object' && window.window === window
  ? window : typeof self === 'object' && self.self === self
    ? self : typeof global === 'object' && global.global === global
      ? global
      : this

// 返回blob对象
function bom(blob, opts) {
  if (typeof opts === 'undefined') opts = { autoBom: false }
  else if (typeof opts !== 'object') {
    console.warn('Deprecated: Expected third argument to be a object')
    opts = { autoBom: !opts }
  }

  // 为UTF-8 XML 和 text/* 类型 (包括 HTML)准备 BOM
  // 笔记: 浏览器会自动转换 UTF-16 U+FEFF 到 EF BB BF
  if (opts.autoBom && /^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {
    return new Blob([String.fromCharCode(0xFEFF), blob], { type: blob.type })
  }
  return blob
}

// 主要的download下载函数，通过创建XMLHttpRequest发送请求
function download(url, name, opts) {
  var xhr = new XMLHttpRequest()
  xhr.open('GET', url)
  xhr.responseType = 'blob'
  xhr.onload = function () {
    // 在拿到响应的数据后，根据不同客户端情况，有不同解决方案
    saveAs(xhr.response, name, opts)
  }
  xhr.onerror = function () {
    console.error('could not download file')
  }
  xhr.send()
}

function corsEnabled(url) {
  var xhr = new XMLHttpRequest()
  // use sync to avoid popup blocker
  xhr.open('HEAD', url, false)
  try {
    xhr.send()
  } catch (e) { }
  return xhr.status >= 200 && xhr.status <= 299
}

// `a.click()` 不是在所有浏览器都起作用 (#465)
// 这里是一种兼容写法，dispatchEvent派发click点击事件，若抛错。则创建并执行自定义的鼠标点击事件
function click(node) {
  try {
    node.dispatchEvent(new MouseEvent('click'))
  } catch (e) {
    var evt = document.createEvent('MouseEvents')
    evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80,
      20, false, false, false, false, 0, null)
    node.dispatchEvent(evt)
  }
}

// Detect WebView inside a native macOS app by ruling out all browsers
// We just need to check for 'Safari' because all other browsers (besides Firefox) include that too
// https://www.whatismybrowser.com/guides/the-latest-user-agent/macos
var isMacOSWebView = _global.navigator && /Macintosh/.test(navigator.userAgent) && /AppleWebKit/.test(navigator.userAgent) && !/Safari/.test(navigator.userAgent)

var saveAs = _global.saveAs || (
  // 可能处在web worker中，无法通过window访问，默认不执行其他操作
  (typeof window !== 'object' || window !== _global)
    ? function saveAs() { /* noop */ }

    // 尽可能先用download属性 (#193 Lumia mobile) 除非它是macOS类浏览器
    : ('download' in HTMLAnchorElement.prototype && !isMacOSWebView)
      ? function saveAs(blob, name, opts) {
        var URL = _global.URL || _global.webkitURL
        var a = document.createElement('a')
        name = name || blob.name || 'download'

        a.download = name
        a.rel = 'noopener' // tabnabbing

        // TODO: detect chrome extensions & packaged apps
        // a.target = '_blank'

        if (typeof blob === 'string') {
          // Support regular links
          a.href = blob
          if (a.origin !== location.origin) {
            corsEnabled(a.href)
              ? download(blob, name, opts)
              : click(a, a.target = '_blank')
          } else {
            click(a)
          }
        } else {
          // 支持blobs时
          a.href = URL.createObjectURL(blob)
          setTimeout(function () { URL.revokeObjectURL(a.href) }, 4E4) // 40s
          setTimeout(function () { click(a) }, 0)
        }
      }

      // 使用msSaveOrOpenBlob作为第二方案，兼容IE10以上
      : 'msSaveOrOpenBlob' in navigator
        ? function saveAs(blob, name, opts) {
          name = name || blob.name || 'download'

          if (typeof blob === 'string') {
            if (corsEnabled(blob)) {
              download(blob, name, opts)
            } else {
              var a = document.createElement('a')
              a.href = blob
              a.target = '_blank'
              setTimeout(function () { click(a) })
            }
          } else {
            navigator.msSaveOrOpenBlob(bom(blob, opts), name)
          }
        }

        // 最后保守方案使用FileReader和弹出窗口
        : function saveAs(blob, name, opts, popup) {
          // Open a popup immediately do go around popup blocker
          // Mostly only available on user interaction and the fileReader is async so...
          popup = popup || open('', '_blank')
          if (popup) {
            popup.document.title =
              popup.document.body.innerText = 'downloading...'
          }

          if (typeof blob === 'string') return download(blob, name, opts)

          var force = blob.type === 'application/octet-stream'
          var isSafari = /constructor/i.test(_global.HTMLElement) || _global.safari
          var isChromeIOS = /CriOS\/[\d]+/.test(navigator.userAgent)

          if ((isChromeIOS || (force && isSafari) || isMacOSWebView) && typeof FileReader !== 'undefined') {
            // Safari不支持blob URLs的下载
            var reader = new FileReader()
            reader.onloadend = function () {
              var url = reader.result
              url = isChromeIOS ? url : url.replace(/^data:[^;]*;/, 'data:attachment/file;')
              if (popup) popup.location.href = url
              else location = url
              popup = null // reverse-tabnabbing #460
            }
            reader.readAsDataURL(blob)
          } else {
            var URL = _global.URL || _global.webkitURL
            var url = URL.createObjectURL(blob)
            if (popup) popup.location = url
            else location.href = url
            popup = null // reverse-tabnabbing #460
            setTimeout(function () { URL.revokeObjectURL(url) }, 4E4) // 40s
          }
        }
)

_global.saveAs = saveAs.saveAs = saveAs

if (typeof module !== 'undefined') {
  module.exports = saveAs;
}

1、其中获取全局对象，值得说道得是除了window，self也指向window，还有node环境中的global。

2、因为click()的不兼容，而自行派发鼠标点击事件，node.dispatchEvent(new MouseEvent('click'))。

iview

iView中的table导出功能，也是提供下载。兼容方式大体是前文讲到的三种方法，写法比较清晰。

iview/src/components/table/export-csv.js

function has(browser) {
  const ua = navigator.userAgent;
  if (browser === 'ie') {
    const isIE = ua.indexOf('compatible') > -1 && ua.indexOf('MSIE') > -1;
    if (isIE) {
      const reIE = new RegExp('MSIE (\\d+\\.\\d+);');
      reIE.test(ua);
      return parseFloat(RegExp['$1']);
    } else {
      return false;
    }
  } else {
    return ua.indexOf(browser) > -1;
  }
}

const csv = {
  _isIE11() {
    let iev = 0;
    const ieold = (/MSIE (\d+\.\d+);/.test(navigator.userAgent));
    const trident = !!navigator.userAgent.match(/Trident\/7.0/);
    const rv = navigator.userAgent.indexOf('rv:11.0');

    if (ieold) {
      iev = Number(RegExp.$1);
    }
    if (navigator.appVersion.indexOf('MSIE 10') !== -1) {
      iev = 10;
    }
    if (trident && rv !== -1) {
      iev = 11;
    }

    return iev === 11;
  },

  _isEdge() {
    return /Edge/.test(navigator.userAgent);
  },

  _getDownloadUrl(text) {
    const BOM = '\uFEFF';
    // Add BOM to text for open in excel correctly
    if (window.Blob && window.URL && window.URL.createObjectURL) {
      const csvData = new Blob([BOM + text], { type: 'text/csv' });
      return URL.createObjectURL(csvData);
    } else {
      return 'data:attachment/csv;charset=utf-8,' + BOM + encodeURIComponent(text);
    }
  },

  download(filename, text) {
    if (has('ie') && has('ie') < 10) {
      // has module unable identify ie11 and Edge
      const oWin = window.top.open('about:blank', '_blank');
      oWin.document.charset = 'utf-8';
      oWin.document.write(text);
      oWin.document.close();
      oWin.document.execCommand('SaveAs', filename);
      oWin.close();
    } else if (has('ie') === 10 || this._isIE11() || this._isEdge()) {
      const BOM = '\uFEFF';
      const csvData = new Blob([BOM + text], { type: 'text/csv' });
      navigator.msSaveBlob(csvData, filename);
    } else {
      const link = document.createElement('a');
      link.download = filename;
      link.href = this._getDownloadUrl(text);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
};

export default csv;

参考链接

打赏