使用xlsx配合FileSaver进行导出excel表格（多个表单）

本文链接：https://blog.youkuaiyun.com/weixin_57733347/article/details/128575454

文章描述了一个Vue.js应用中如何利用npm安装xlsx和file-saver库，来实现多个表格数据的导出功能。通过给每个表格添加ID，检查数据存在后，将表格转换为Excel文件并保存。用户点击按钮可以导出多个含有数据的表格。

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

安装
npm install xlsx@^0.16.0 --save
npm install file-saver@^2.0.2 --save
引入依赖
import FileSaver from 'file-saver';
import XLSX from 'xlsx';

首先添加一个导出

<el-button  type="primary" @click="exportsAll">导出2</el-button>

然后找到相对应多个的表单

 <div>
            <el-table :data='tableData'
                      style='width: 100%;padding: 20px 0 80px 80px;'
            >
              <el-table-column
                type='index'
                width='50'>
              </el-table-column>

              <el-table-column prop='name' label='用户名' sortable min-width='100'>                    
              </eltable-column>

              <el-table-column prop='distance' label='总里程' sortable min-width='100'>
              </el-table-column>
              </el-table>
</div>

<div>
            <el-table :data='tableData2'
                      style='width: 100%;padding: 20px 0 80px 80px;'
            >
              <el-table-column
                type='index'
                width='50'>
              </el-table-column>

              <el-table-column prop='name' label='嘎嘎嘎' sortable min-width='100'>
              </el-table-column>

              <el-table-column prop='space' label='六子' sortable min-width='100'>
              </el-table-column>

            </el-table>
</div>

给每个的表单添加一个id：""（两个表单tableData1和tableData2）

 <el-table :data='tableData1'
           id="out-tableData1"   <!--定义id跟表单名称类型-->
           style='width: 100%;padding: 20px 0 80px 80px;'>
</el-table>


 <el-table :data='tableData2'
           id="out-tableData2"   <!--定义id跟表单名称类型-->
           style='width: 100%;padding: 20px 0 80px 80px;'>
</el-table>

声明一个数组因为是多个表单导出

exportsAll(){
      //判断tableData是否有数据，如果任意一个有数据就不用返回
      if(this.tableData1.length == 0 && this.tableData2.length){
        this.$message({
          message: '没有数据可导出',
          type: 'warning'
        });
        return;
      }
//声明一个数组因为是多个表单导出
      let  tableAll=[];
      //判断drivingData和scanData中有数据的
      if(this.tableData1.length>0){
        tableAll.push({
          //这里就是导出的问价名称 name
          name:"嘎嘎嘎1",
          table:"#out-tableData"
        })
      }
      if(this.tableData2.length>0){
        tableAll.push({
          //这里就是导出的问价名称 name
          name:"嘎嘎嘎2",
          table:"#out-tableData2"
        })
      }
      this.exportExcel(tableAll);
    },

调用导出的方法（传入上边的tableAll）

 exportExcel(tableAll) {
      //for循环导出多个表格
      for(let i=0;i<tableAll.length;i++){
        let table = tableAll[i].table;
        let name = tableAll[i].name;
        let wb = XLSX.utils.table_to_book(document.querySelector(table), {
          sheet: name
        });
        let wbout = XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: false,
          type: "array"
        });
        try {
          FileSaver.saveAs(
            new Blob([wbout], {
              type: "application/octet-stream"
            }),
            name + ".xlsx"
          );
          this.$notify({
            title: name,
            message: '数据导出成功！',
            type: 'success'
          });
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbout);
        }
      }
    },