前端開發常用工具函數——（一）文件下載功能

前端下載有兩種常用方式，一種是打開新頁籤觸發下載，另一種是在本頁面先下載文件轉換爲二進制再下載。

一、新建標籤頁的方式

function downLoad (downLoadUrl) {
    let a = document.createElement('a')
    //是否支持download(H5屬性)
    if (a.download) {
      // 必須設置 href 屬性，可以使文件名
      a.href = downLoadUrl
      if (document.createEvent) {
        var evObj = document.createEvent('MouseEvents')
        evObj.initEvent(
          'click',
          true,
          true,
          window,
          1,
          12,
          345,
          7,
          220,
          false,
          false,
          true,
          false,
          0,
          null
        )
        a.dispatchEvent(evObj)
      } else if (document.createEventObject) {
        a.fireEvent('onmousemove')
      }
    } else {
      window.open(downLoadUrl, '_blank')
    }
  }

二、當前頁下載

function postDownLoad (data) {
  axios({
    baseURL,
    method: 'get',
    url: data.documentUrl,
    headers: {
      Authorization: utils.getSS('Authorization') || null,
      'Content-type': 'application/json;charset=UTF-8'
    },
    responseType: 'blob',
    timeout: 10000,
    data: {}
  }).then(res => {
    const blob = new Blob([res.data])
    // 兼容不同瀏覽器的URL對象
    const url = window.URL || window.webkitURL || window.moxURL
    //  兼容IE
    if ('msSaveOrOpenBlob' in navigator) {
      window.navigator.msSaveOrOpenBlob(blob, data.fileName)
      return
    }
    // 創建下載鏈接
    const downloadHref = url.createObjectURL(blob)
    // 創建a標籤併爲其添加屬性
    let downloadLink = document.createElement('a')
    downloadLink.href = downloadHref
    downloadLink.download = data.fileName || data.contractName || '未知文件.txt'
    // 觸發點擊事件執行下載
    downloadLink.click()
  }).catch(_ => {})
}