前端下载（导出）功能实现

1、a标签（download属性【HTML5】）下载

<a href="/api/getImg" download="file.xlsx">下载</a>

download：此属性指示浏览器下载 URL 而不是导航到它，因此将提示用户将其保存为本地文件。如果属性有一个值，那么此值将在下载保存过程中作为预填充的文件名（如果用户需要，仍然可以更改文件名）。此属性对允许的值没有限制，但是 / 和 \ 会被转换为下划线。大多数文件系统限制了文件名中的标点符号，故此，浏览器将相应地调整建议的文件名。

注意：

（1）.仅适用于同源URL

（2）尽管 HTTP URL 需要位于同一源中，但是可以使用 blob: URL 和 data: URL，以方便用户下载使用 JavaScript 生成的内容

（3）如果 HTTP 头中的 Content-Disposition 属性赋予了一个不同于此属性的文件名，HTTP 头属性优先于此属性（后端一般会设置Content-Disposition: attachment; filename="filename.jpg"）

缺点：IE不支持download属性、只能下载不能被浏览器打开的文件类型，图片、文本文件、html这种类型的文件无法直接下载可以被浏览器打开的只能在浏览器中预览

 

2、DataUrl或BlobUrl实现下载

通过DataUrl或BlobUrl可以实现图片、文本文件、html不预览直接下载，具体使用可以看这篇文章：https://juejin.im/post/5c3c4b3551882524a5420119

 

3、location.href和iframe下载

（1）location.href = 'template.xlsx'

（2）

// 无闪现下载excel
function download(url) {
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  function iframeLoad() {
    console.log('iframe onload');
    const win = iframe.contentWindow;
    const doc = win.document;
    if (win.location.href === url) {
      if (doc.body.childNodes.length > 0) {
        // response is error
      }
      iframe.parentNode.removeChild(iframe);
    }
  }
  if ('onload' in iframe) {
    iframe.onload = iframeLoad;
  } else if (iframe.attachEvent) {
    iframe.attachEvent('onload', iframeLoad);
  } else {
    iframe.onreadystatechange = function onreadystatechange() {
      if (iframe.readyState === 'complete') {
        iframeLoad;
      }
    };
  }
  iframe.src = '';
  document.body.appendChild(iframe);

  setTimeout(function loadUrl() {
    iframe.contentWindow.location.href = url;
  }, 50);
}

4、使用FileSaver插件

5、应用场景

axios({
      method: 'post',
      url: '/api/systemLog/downLoadLog',
      data: bodyData,
      responseType: 'arraybuffer'
    }).then((res) => {
      // type 为需要导出的文件类型，此处为xls表格类型
        const blob = new Blob( [res.data], {type: 'application/vnd.ms-excel'} )
        // 兼容不同浏览器的URL对象
        const url = window.URL || window.webkitURL || window.moxURL
        // 创建下载链接
        const downloadHref = url.createObjectURL(blob)
        // 创建a标签并为其添加属性
        let downloadLink = document.createElement('a')
        downloadLink.href = downloadHref
        downloadLink.download = '导出日志.xlsx'
        // 触发点击事件执行下载
        downloadLink.click()
    })