Vue + Element 后台管理頁面之實現導出報表按鈕

如圖

 

 導出Excel報表

 

 

 

項目的代碼：

//按鈕
<el-button size="mini">
              <a v-on:click="exportFrom()">導出報表</a>
</el-button>

//實現方法
exportFrom () {
      this.$http({
        url: this.$http.adornUrl('接口地址，綁定情況'),
        method: 'get',
        params: this.$http.adornParams({
          start: this.tempFormData.start,
          end: this.tempFormData.end,
          storeId: this.tempFormData.storeId,
          orderId: this.tempFormData.orderId,
          payType: this.tempFormData.payType,
          incPayType: this.tempFormData.incPayType,
          minAmount: this.tempFormData.minAmount,
          maxAmount: this.tempFormData.maxAmount,
          current: 1,
          size: this.pageTotal
        }),
        responseType: 'blob'
      }).then(({ data }) => {
        var blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
        const fileName = '財務明細(' + this.dateRange[0] + '至' + this.dateRange[1] + ').xls'

        const elink = document.createElement('a')
        if ('download' in elink) { // 非IE下載
          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)
        }
      })
    },