1. 程式人生 > 實用技巧 >vue 匯出功能 後端返回流

vue 匯出功能 後端返回流

 1. import XLSX from 'xlsx'
  import ES6Promise from 'es6-promise'

 2.入參增加 responseType: 'blob',
  例如: exportTemporaryList: params => {
    return api.get({url: '/temporary/exportTemporaryList', params, responseType: 'blob', headers: {'Content-Type': 'application/json'}})
  },

3. organApi.exportTemporaryList(dataInformation) // 重新獲取下級節點
          .then((res2) => {
             let downloadFileName =  'aaaa.xlsx' // 匯出後文件名
                  if ('msSaveOrOpenBlob' in navigator) { // Microsoft Edge and Microsoft Internet Explorer 10-11
                    window.navigator.msSaveOrOpenBlob(res2, downloadFileName)
                  } else { // standard code for Google Chrome, Mozilla Firefox etc
                    var blob = new Blob([res2], {type: 'application/vnd.ms-excel'})
                    var downloadElement = document.createElement('a')
                    var href = window.URL.createObjectURL(blob) // 建立匯出的連結
                    downloadElement.href = href
                    downloadElement.download = downloadFileName
                    document.body.appendChild(downloadElement)
                    downloadElement.click() // 點選匯出
                    setTimeout(() => {
                      document.body.removeChild(downloadElement) // 匯出完成移除元素
                      window.URL.revokeObjectURL(href) // 釋放掉blob物件
                    }, 500)
                  }
        })