纯前端导出复杂表格（合并单元格，多表头）

最新推荐文章于 2024-08-17 16:56:44 发布

伍小强

最新推荐文章于 2024-08-17 16:56:44 发布

阅读量479

点赞数 3

文章标签：前端 vue.js elementui

本文链接：https://blog.csdn.net/wkq15607116592/article/details/137788719

版权

博客主要介绍了前端安装相关依赖的命令，使用yarn安装file-saver，同时安装XLSX时需指定版本为0.16.9，因为最新版会报错，utils文件缺失。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

yarn add file-saver

yarn add XLSX @^0.16.9 （只能是这个版本，最新版会报错 utils 文件没有）

<el-table
    ref="table"
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column label="配送信息">
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column label="地址">
        <el-table-column
          prop="province"
          label="省份"
          width="120">
        </el-table-column>
        <el-table-column
          prop="city"
          label="市区"
          width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          width="300">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="邮编"
          width="120">
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table>

<el-button @click="exportExcel('导出')">导出</el-button>

methods: {
    exportExcel(excelName) {
      try {
        const $e = this.$refs['table'].$el   //  这个table 为 ref 绑定的 id
        let $table = $e.querySelector('.el-table__fixed')
        if(!$table) {
          $table = $e
        }

        const wb = XLSX.utils.table_to_book($table, {raw:true})
        const wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST:true, type: 'array'})
        FileSaver.saveAs(
          new Blob([wbout],{type: 'application/octet-stream'}),
          `${excelName}.xlsx`,
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.error(e)
      }
    }
  },