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)
        }
      })
    },