vue導出excel的兩種實現(xiàn)方式代碼

更新時間：2023年08月23日 09:54:30 作者：Humor_L

這篇文章主要給大家介紹了關于vue導出excel的兩種實現(xiàn)方式,在項目中我們可能會碰到導出Excel文件的需求,文中給出了詳細的代碼示例,需要的朋友可以參考下

目前使用

handleExport () {
      this.exportName = `通訊錄`
      let params = tools.deepClone(this.searchParams)
      params.search.size = this.total
      接口請求地址(params).then(res => {
        const href = window.URL.createObjectURL(new Blob([res]))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = href
        link.setAttribute('download', this.exportName + '.xls')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link) // 下載完成移除元素
        window.URL.revokeObjectURL(href) // 釋放掉blob對象
      }).catch(err => {
        this.$message.error(err)
      })
    },

需求說明

通過vue實現(xiàn)導出有兩種方式：

（1）后端返回的是一個地址，直接拼接打開下載就行

（2）后端返回的是文件流的形式，這個時候就需要在請求頭還有返回值的地方設置一下

一、后端返回的是地址

// 頁面代碼
<el-button
       type="primary"
       size="mini"
       class="filter-item"
       icon="el-icon-download"
       style="margin: 12px 20px 0 0; float: right"
       @click="onExportClick"
       >
       導出
</el-button>
 onExportClick() {//導出方法
     exportDevices(this.listQuery) //導出接口
      .then(result => {
         const url = result.data
         window.open(url)    //通過這個打開網(wǎng)頁就可下載導出
      })
       .catch(err => console.log(err))
}

二、后端返回的是文件流

（1）設置請求頭

/**
* 按照部門人員導出（包括事件類型）
* @param {*} pType
* @returns
*/
export function exportDetailOrder(pType) {
  return request({
      url: '/exportEventDetailByDepart',
      method: 'get',
      responseType: 'blob',  //需要在此處設置請求頭，設置請求的類型為blob文件流的形式
      params: {
          pType
      }
  })
}

（2）設置返回結果，處理返回我文件流

onExportClick() {  //導出的方法
            exportDetailOrder(this.pType)  //導出的接口
                .then(result => {
                    console.log(result)
                    const link = document.createElement('a')  //創(chuàng)建a標簽
                    const blob = new Blob([result], { type: 'application/vnd.ms-excel' }) //設置文件流
                    link.style.display = 'none'
                    // 設置連接
                    link.href = URL.createObjectURL(blob)  //將文件流轉化為blob地址
                    link.download = '處理人員維修工單統(tǒng)計報表'
                    document.body.appendChild(link)
                    // 模擬點擊事件
                    link.click()  //設置點擊事件
                })
                .catch(err => {
                    console.log(err)
                })
        }

（3）附加說明

有的時候做到上述幾步還是不能導出，debugger之后，發(fā)現(xiàn)接口調用的時候直接走的.catch,沒走.then,所以需要我們在全局響應攔截做一些判斷。

//一般在utils下面的requext.js文件里面
export function validResponse(res, errorMessage) {
    if (res instanceof Blob) {  //如果返回的是文件流的形式，直接return res
        return res
    } else if (res.code !== 200 && res.code !== 201 && res.code !== 204) {
        return Promise.reject(new Error(res.message || '發(fā)生錯誤！'))
    } else {
        return res
    }
}

目前用的：

handleExport() {
              let me = this
              let url = '/fcst/gpcprevention/exportGpcSummary'
              let filename = me.reportname
              let exportparams = {
                taskyear: utils.formatDate(me.searchParams.taskyear, 'yyyy'),
                reportid: me.searchParams.reportid,
                  char1:me.searchParams.char1,
              }
              utils.onDownload(me, url, filename, exportparams);
            }

utils.onDownload方法：

utils.onDownload = function (vm,url,filename,searchParams) {
    let params = utils.addFormData(searchParams);
    vm.$axios(
        {
            method: 'post',
            url: url,
            data: params,
            responseType: 'blob'
        }
    ).then(function(res) {
        let href = window.URL.createObjectURL(new Blob([res]));
        let link = document.createElement('a');
        link.style.display = 'none';
        link.href = href;
        link.setAttribute('download', filename + '.xls');
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link); // 下載完成移除元素
        window.URL.revokeObjectURL(href); // 釋放掉blob對象
    });
};