vue3使用xlsx库导出el-table数据

1、使用xlsx导出所有列

<el-button size="small" text type="primary" @click="exportToExcel">
          <template #icon>
            <i class="ti-download" title="导出Excel"></i>
          </template>
        </el-button>
const exportTableRef = ref()
const exportToExcel = () => {
  const tableDom = exportTableRef.value?.$el
  if (!tableDom) {
    return
  }
  const wb = XLSX.utils.table_to_book(tableDom)
  XLSX.writeFile(wb, '表格数据.xlsx')
}

2、自定义导出列

function exportExcel() {
  // swal
  //   .fire({
  //     title: '是否要导出单元阀设备列表?',
  //     text: '',
  //     icon: 'warning',
  //     confirmButtonText: '确定',
  //     cancelButtonText: '取消',
  //     showCancelButton: true
  //   })
  //   .then((result) => {
  //     if (result.isConfirmed) {
  let headerArray = [
    '序号',
    '项目名称',
    '维修状态',
    '地理位置',
    '热源计划维修数量(个)',
    '热源实际维修数量(个)',
    '计划维修时间',
    '计划结束时间',
    '实际维修时间',
    '实际结束时间',
    '完成率(%)',
    '方案文件'
  ]
  filteredData.value.forEach((item: any, index: any) => {
    item.index = index + 1
  })
  let data = [headerArray].concat(
    filteredData.value.map((element: any) => {
      let rowData = [
        element.index,
        element.projectName,
        // element.maintenanceStatus,
        element.maintenanceStatus == '0'
          ? '未进行'
          : element.maintenanceStatus == '1'
            ? '进行中'
            : '已完成',
        element.address,
        element.planMaintenanceHeatSource,
        element.actualMaintenanceHeatSource,
        moment(element.planMaintenanceTime).format('YYYY-MM-DD HH:mm'),
        moment(element.planEndTime).format('YYYY-MM-DD HH:mm'),
        moment(element.actualMaintenanceTime).format('YYYY-MM-DD HH:mm'),
        moment(element.actualEndTime).format('YYYY-MM-DD HH:mm'),
        element.completeRate,
        element.planFile == null ? '-' : element.planFile.originalFilename
      ]
      return rowData
    })
  )
  let sheet = excelUtils.json_to_sheet(data, {
    skipHeader: true
  })
  let book = excelUtils.book_new()
  excelUtils.book_append_sheet(book, sheet)
  writeFile(
    book,

    '热源列表_' + moment(new Date()).format('YYYYMMDDHHmmss') + '.xlsx'
  )
  //   }
  // })
}

使用element-plus el-table实现xlsx数据导出,需要使用xlsx和file-saver插件。 1. 第一步是安装和引入xlsx和file-saver插件。 ``` npm install xlsx file-saver --save ``` ```javascript import XLSX from 'xlsx' import FileSaver from 'file-saver' ``` 2. 第二步是编写xlsx导出函数,该函数将读取el-table中的数据并将其写入xlsx工作表。 ```javascript export function exportExcel(tableData, fileName) { const worksheet = XLSX.utils.json_to_sheet(tableData) const workbook = XLSX.utils.book_new() XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1') const buffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }) saveAs(new Blob([buffer], { type: 'application/octet-stream' }), fileName) } ``` 3. 最后,在事件处理程序中调用导出函数,并传递el-table数据和文件名作为参数。 ```javascript exportExcel(this.tableData, '文件名.xlsx') ``` 完整示例代码: ```vue <template> <el-table :data="tableData" border> <el-table-column prop="id" label="ID"></el-table-column> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <template slot="summary"> <el-button type="primary" @click="handleExport">导出</el-button> </template> </el-table> </template> <script> import XLSX from 'xlsx' import FileSaver from 'file-saver' export default { data() { return { tableData: [ { id: '1', name: '张三', age: '20', address: '上海' }, { id: '2', name: '李四', age: '30', address: '北京' }, { id: '3', name: '王五 ', age: '40', address: '广州' } ] } }, methods: { handleExport() { const worksheet = XLSX.utils.json_to_sheet(this.tableData) const workbook = XLSX.utils.book_new() XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1') const buffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }) FileSaver.saveAs(new Blob([buffer], { type: 'application/octet-stream' }), '数据.xlsx') } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值