前端下載（導出）功能實現

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()
    })