vue导出按钮功能

祺de摸鱼日记

已于 2022-07-26 14:10:48 修改

阅读量724

点赞数

文章标签： vue.js elementui javascript

于 2022-07-26 14:09:32 首次发布

本文链接：https://blog.csdn.net/m0_62100591/article/details/125993378

版权

将后端获取的数据通过后端的接口转换成Excel类数据

按钮

 <el-button type="warning" @click="handleExport"> 导出</el-button>

接口

// 导出接口
export function orderExport(data) {
  return request({
    method: 'post',
    url: `${BASE_URL}/payOrderInfo/export`,
    data,
    responseType: 'blob'
  })
}

引包

import { saveAs } from 'file-saver'

方法



  handleExport() {
      orderExport({
        columnsList: [
          { label: '订单状态', property: 'orderStatus' },
          { label: '订单编号', property: 'orderNo' },
          { label: '下单人', property: 'contactName' },
          { label: '所属单位', property: 'companyName' },
          { label: '联系电话', property: 'contactPhone' },
          { label: '下单时间', property: 'confirmDate' },
          { label: '付款时间', property: 'payDate' },
          { label: '订单最终价格', property: 'payMoney' }
        ]
      }).then(response => {
        saveAs(response.data, '数据.xlsx')
      })
    }