1. 程式人生 > 實用技巧 >vue中匯出Excel檔案流

vue中匯出Excel檔案流

1、封裝匯出的方法

export function httpExport (url, params) {
  return new Promise((resolve, reject) => {
    axios({
      url: url,
      method: 'post',
      data: params,
      responseType: 'blob'
    })
      .then(res => {
        debugger
        resolve(res)
      })
      .catch(err => {
        if (err === undefined || err.__CANCEL__) {
          return
        }
        notification.error({
          title: '錯誤',
          message: err
        })
        reject(err)
      })
  })
}

 2、處理respones資料

if (res) {
          const fileName = '未繫結IC卡列表.xlsx'
          const content = res.data
          const blob = new Blob([content])
          if ('download' in document.createElement('a')) { // 非IE下載
            const elink = document.createElement('a')
            elink.download = fileName
            elink.style.display = 'none'
            elink.href = URL.createObjectURL(blob)
            document.body.appendChild(elink)
            elink.click()
            URL.revokeObjectURL(elink.href) // 釋放URL 物件
            document.body.removeChild(elink)
          } else { // IE10+下載
            navigator.msSaveBlob(blob, fileName)
          }
        }

 3、在axios攔截器中處理響應體(普通的響應體是response.data)

if (
      response.headers['content-type'] ===
      'application/vnd.ms-excel;charset=UTF-8'
    ) {
      // 是否為匯出
      return Promise.resolve(response)
    }