vue下載文件模板(excel) 和 導出excel表格

1. get形式傳參數

　　僅限於get方式，注意請求頭參數...,需要后台放開

window.location = '/dms-underlying-asset/download?assetType=' + localStorage.getItem('assetType')

 

2. post形式傳參數

　　前端項目中使用最多的

　　注意：請求類型：responseType: "blob"

　　（1）定義接口（post請求，responseType：數據返回類型為blob）

export function download(data) {
  return request({
    url: `api/exportExcel`,
    method: 'post',
    responseType: 'blob',
    data
  })
}

　　（2）調用接口

const res = await download(this.form)
// 等同於
// axios.post('/api/exportExcal', this.form, {responseType: //"blob"}).then(res => {})

console.log(res, '這里會看到返回的blob文件流')   // 類似這種

if (!res) return      //
const excelTitle = "嚶嚶嚶.xlsx"

this.readFileDownload(res, excelTitle)    // 封裝讀取文件並下載　　

 　　（3）封裝讀取文件並下載

　　　　這里涉及到幾個問題：

　　　　　　1. FileReader 讀取bolb流文件，參考：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

　　　　　　　　FileReader 對象允許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩沖區）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據。

　　　　　　2. content-type（res.type === 'application/octet-stream'）我們在解析res.type的時候，參考：https://blog.csdn.net/u012894692/article/details/88846401

export function readFileDownload(data, msg) {
  var res = data
  if (res.type === 'application/json' || res.type === 'application/json;charset=UTF-8') {     // 失敗的時候，注意ie兼容問題


    let fileReader = new FileReader()
    fileReader.onload = function(event) {
      let jsonData = JSON.parse(this.result) // this.result是根據event，讀取文件后打印的
      console.log(jsonData, '...............')
      if (jsonData.data === null && jsonData.code === 1) {
        Message({
          message: jsonData.msg || 'Error',
          type: 'error',
          duration: 5 * 1000
        })
      }
    }
    fileReader.readAsText(res)

  }
  if (res.type === 'application/octet-stream' || res.type === 'application/vnd.ms-excel' || res.type === 'application/vnd.ms-excel;charset=UTF-8') {
    console.log('success...')         // 成功，注意ie兼容問題 const blob = new Blob([res], { type: 'application/vnd.ms-excel;charset=utf-8' })

    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
      window.navigator.msSaveOrOpenBlob(blob, msg)
    } else {
      console.log(blob)
      const url = window.URL.createObjectURL(blob)
      console.log(url)
      const aLink = document.createElement('a')
      aLink.style.display = 'none'
      aLink.href = url
      aLink.setAttribute('download', msg)
      document.body.appendChild(aLink)
      aLink.click()
      document.body.removeChild(aLink)
      window.URL.revokeObjectURL(url)
    }
  }
}

 

3，將表格的下載成excel表格(table表格綁定id)

　　這種方式怎么說呢，感覺不實用，僅限於前端頁面的table表格，在沒有后台接口的情況下，（有分頁的話還比較難搞），不實用

// 導出表格
      var wb = XLSX.utils.table_to_book(document.querySelector('#mytable')) //mytable為表格的id名
      var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '統計表.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout