關於VUE實現文件下載的多種方法

注：問題主要出現在項目中引用mockjs 影響原生ajax的responseType，導致配置blob方式無法生效，注釋引用mockjs，實現文檔流下載

// 方法一  直接打開新標簽頁，IE會出現兼容問題
window.open('/api/delivery/channel/export?' + paramsString)
// 方法二  調用插件 npm install --save ly-downloader
download(1,'/api/delivery/channel/export?' + paramsString, 'kkk' )
// 方法三  action方法，傳參后創建blob對象
this.asyExportchannelexcel().then((res) => {
  // console.log(res)
  // let data = "\ufeff" + res.data
  let blob = new Blob([res.data], {
      type: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  })
  if (window.navigator.msSaveOrOpenBlob) {
      navigator.msSaveBlob(blob);
  } else {
      let url = window.URL.createObjectURL(blob)
      let elink = document.createElement('a');
      elink.download = "報表.xls";
      elink.style.display = 'none';
      elink.href = url
      document.body.appendChild(elink);
      elink.click();
      document.body.removeChild(elink);
  }
})
// 方法四  創建xhr對象，實現請求
let xhr = new XMLHttpRequest()
let fileName = 'file.xls' // 文件名稱 
xhr.open('GET', '/api/delivery/channel/export?' + paramsString, true)
xhr.responseType = 'arraybuffer'
console.log(xhr)
// xhr.setRequestHeader(token, 'xxxxx') // 請求頭中的驗證信息等（如果有）
xhr.onload = function() {
  if (this.status === 201) {
    let type = xhr.getResponseHeader('Content-Type')
    console.log(type)
    let blob = new Blob([this.response], {type: type})
    if (typeof window.navigator.msSaveBlob !== 'undefined') {
      /*
       * IE workaround for "HTML7007: One or more blob URLs were revoked by closing
       * the blob for which they were created. These URLs will no longer resolve as 
       * the data backing the URL has been freed." 
       */
      window.navigator.msSaveBlob(blob, fileName)
    } else {
      let URL = window.URL || window.webkitURL
      let objectUrl = URL.createObjectURL(blob)
      if (fileName) {
        var a = document.createElement('a')
        // safari doesn't support this yet
        if (typeof a.download === 'undefined') {
          window.location = objectUrl
        } else {
          a.href = objectUrl
          a.download = fileName
          document.body.appendChild(a)
          a.click()
          a.remove()
        }
      } else {
        window.location = objectUrl
      }
    }
  }
}
xhr.send()
// 方法五  原生axios實現請求
let info = {
  department6Name: this.$store.state.project.channeldepartment6,
  department7Name: this.$store.state.project.channeldepartment7,
  quotalevel: this.$store.state.project.channelquotalevel,
  step: this.$store.state.project.channelstep,
  deliveryMethod: this.$store.state.project.channeldeliveryMethod,
  contract_sign_time: this.$store.state.project.channelyear
}
axios({
    method: 'GET',
    url: '/api/delivery/channel/export',
    header: {
        contentType: "application/x-www-form-urlencoded; charset=utf-8"
    },
    params: info,
    responseType: 'blob'
  }).then(res=>{
    console.log(res)
    let blob = new Blob([res.data], {type: "application/vnd.ms-excel;charset=utf-8"});
    console.log(blob)
    let fileName = '渠道交付.xls'
    if (window.navigator.msSaveOrOpenBlob) { // IE10
      navigator.msSaveBlob(blob, fileName);
    } else {
      let link = document.createElement('a');
      link.style.display = 'none';
      link.href = URL.createObjectURL(blob); //創建一個指向該參數對象的URL
      link.download = fileName;
      link.click(); // 觸發下載
      URL.revokeObjectURL(link.href); // 釋放通過 URL.createObjectURL() 創建的 URL
    }
  }).catch(err=>{
    console.log(err)
  })
}