如何将vue3项目下的el-table表格导出到 excel 并保留样式和数据的展现形式？

Question

如何将vue3项目下的el-table表格导出到 excel 并保留样式和数据的展现形式？

*^O^*

141616

发布于
2024-01-17 浙江

更新于
2024-01-17

需求是要将图示的表格导出到excel中并且展现形式和样式要一致

请问有什么方法实现吗, 下面时表格实现的代码

<template>
  <div>
    <el-table :data="tableData" style="width: 100%" :span-method="arraySpanMethod" :row-class-name="rowClassName" class="dailyReport">
      <el-table-column label="江苏明卓加工情况" align="center">
        <template #header>
          <span style="font-size: 18px; font-weight: bolder;">江苏明卓加工情况</span>
        </template>
        <el-table-column prop="col1" label="机组" width="150" align="center" />
        <el-table-column prop="col2" label="机组人员" width="150" align="center" />
        <el-table-column prop="col3" label="客户" width="150" align="center" />
        <el-table-column label="规格" align="center">
          <el-table-column prop="col4" label="厚度" width="120" align="center" />
          <el-table-column prop="col5" label="宽度" width="120" align="center" />
          <el-table-column prop="col6" label="长度" width="120" align="center" />
        </el-table-column>
        <el-table-column prop="col7" label="数量" width="120" align="center" />
        <el-table-column prop="col8" label="产量(平方/米)" width="120" align="center" />
        <el-table-column prop="col9" label="绩效" width="120" align="center" />
        <el-table-column prop="col10" label="加工单价" width="120" align="center" />
        <el-table-column prop="col11" label="金额" width="120" align="center" />
        <el-table-column prop="col12" label="加工要求" width="120" align="center" />
        <el-table-column prop="col13" label="备注" width="120" align="center" />
      </el-table-column>
    </el-table>

  </div>
</template>

<script setup name="DailyReport">

const rowClassName = ({row}) => {
  if(row.col2 === '合计') {
    return 'totalRowClass'
  } else {
    return ''
  }
}
const tableData = [
  {
    col1: "2016-05-03",
    col2: "Tom",
    col3: "California1",
    col4: "1",
    col5: "No. 189",
    col6: "CA 900361",
    col7: "CA 9003611",
    col8: "CA 9003611",
    col9: "CA 9003611",
    col10: "CA 9003611",
    col11: "CA 9003611",
    col12: "CA 9003611",
    col13: "CA 9003611",
  },
  {
    col1: "2016-05-03",
    col2: "Tom",
    col3: "California2",
    col4: "2",
    col5: "No. 189",
    col6: "CA 90036",
    col7: "CA 9003611",
    col8: "CA 9003611",
    col9: "CA 9003611",
    col10: "CA 9003611",
    col11: "CA 9003611",
    col12: "CA 9003611",
    col13: "CA 9003611",
  },
  {
    col1: "2016-05-03",
    col2: "Tom",
    col3: "California3",
    col4: "Los Angeles3",
    col5: "No. 189",
    col6: "CA 90036",
    col7: "CA 9003611",
    col8: "CA 9003611",
    col9: "CA 9003611",
    col10: "CA 9003611",
    col11: "CA 9003611",
    col12: "CA 9003611",
    col13: "CA 9003611",
  },
   
  {
    col1: "2016-05-03",
    col2: "合计",
    col3: "",
    col4: "",
    col5: "",
    col6: "",
    col7: "10",
    col8: "28",
    col9: "100",
    col10: "",
    col11: "",
    col12: "",
    col13: "",
  },

  {
    col1: "2017-05-03",
    col2: "Tom2",
    col3: "Californiaq",
    col4: "Los Angeles",
    col5: "No. 189",
    col6: "CA 90036",
    col7: "CA 9003611",
    col8: "CA 9003611",
    col9: "CA 9003611",
    col10: "CA 9003611",
    col11: "CA 9003611",
    col12: "CA 9003611",
    col13: "CA 9003611",
  },
  {
    col1: "2017-05-03",
    col2: "Tom2",
    col3: "Californiaq",
    col4: "Los Angeles",
    col5: "No. 189",
    col6: "CA 90036",
    col7: "CA 9003611",
    col8: "CA 9003611",
    col9: "CA 9003611",
    col10: "CA 9003611",
    col11: "CA 9003611",
    col12: "CA 9003611",
    col13: "CA 9003611",
  },
  {
    col1: "2017-05-03",
    col2: "Tom2",
    col3: "Californiat",
    col4: "Los Angeles",
    col5: "No. 189",
    col6: "CA 90036",
    col7: "CA 9003611",
    col8: "CA 9003611",
    col9: "CA 9003611",
    col10: "CA 9003611",
    col11: "CA 9003611",
    col12: "CA 9003611",
    col13: "CA 9003611",
  },
  {
    col1: "2017-05-03",
    col2: "合计",
    col3: "",
    col4: "",
    col5: "",
    col6: "",
    col7: "10",
    col8: "28",
    col9: "100",
    col10: "",
    col11: "",
    col12: "",
    col13: "",
  },
  {
    col1: "2018-05-03",
    col2: "Tom",
    col3: "California6",
    col4: "Los Angeles",
    col5: "No. 189",
    col6: "CA 90036",
    col7: "CA 9003611",
    col8: "CA 9003611",
    col9: "CA 9003611",
    col10: "CA 9003611",
    col11: "CA 9003611",
    col12: "CA 9003611",
    col13: "CA 9003611",
  },
  {
    col1: "2018-05-03",
    col2: "Tom",
    col3: "California7",
    col4: "Los Angeles",
    col5: "No. 189",
    col6: "CA 90036",
    col7: "CA 9003611",
    col8: "CA 9003611",
    col9: "CA 9003611",
    col10: "CA 9003611",
    col11: "CA 9003611",
    col12: "CA 9003611",
    col13: "CA 9003611",
  },
  {
    col1: "2018-05-03",
    col2: "Tom",
    col3: "California8",
    col4: "Los Angeles",
    col5: "No. 189",
    col6: "CA 90036",
    col7: "CA 9003611",
    col8: "CA 9003611",
    col9: "CA 9003611",
    col10: "CA 9003611",
    col11: "CA 9003611",
    col12: "CA 9003611",
    col13: "CA 9003611",
  },
  {
    col1: "2018-05-03",
    col2: "合计",
    col3: "",
    col4: "",
    col5: "",
    col6: "",
    col7: "10",
    col8: "28",
    col9: "100",
    col10: "",
    col11: "",
    col12: "",
    col13: "",
  },

  {
    col1: "日产量",
    col2: "油膜机组(平方)",
    col3: "",
    col4: "",
    col5: "",
    col6: "",
    col7: "",
    col8: "激光+坡口(米)",
    col9: "",
    col10: "",
    col11: "",
    col12: "",
    col13: "",
  },
  {
    col1: "生产金额",
    col2: " ",
    col3: "",
    col4: "",
    col5: "",
    col6: "",
    col7: "",
    col8: "",
    col9: "",
    col10: "",
    col11: "",
    col12: "",
    col13: "",
  },
  {
    col1: "累计生产金额",
    col2: "  ",
    col3: "",
    col4: "",
    col5: "",
    col6: "",
    col7: "",
    col8: "",
    col9: "",
    col10: "",
    col11: "",
    col12: "",
    col13: "",
  }
];


// 合并行
const arraySpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}) => {
  
 // 列合并 
 if(['生产金额', '累计生产金额'].includes(row.col1)) {
  if (columnIndex === 0) {
      return [1, 1]
    } else {
      return {
        rowspan: 1,
        colspan: tableData.length - 1
      }
    }
 }

 if(['日产量'].includes(row.col1)) {
    if([0, 1, 7].includes(columnIndex)) {
      return [1, 1]
    } else if([2, 8].includes(columnIndex)) {
      return [1, 5]
    } else {
      return [0, 0]
    }
 }

 // 行合并
 if (['col1'].includes(column.property)) {
    if(rowIndex > 0 && row.col1 === tableData[rowIndex - 1].col1) {
      return {
        rowspan: 0,
        colspan: 0
      }
    } else {
      let rowspan = 1
      for(let i = rowIndex + 1; i < tableData.length; i++) {
        if(tableData[i].col1 === row.col1) {
          rowspan++
        } else {
          break
        }
      }
      return {
        rowspan,
        colspan: 1
      }
      }
 } 

 if (['col2'].includes(column.property)) {
    if(rowIndex > 0 && row.col2 === tableData[rowIndex - 1].col2) {
      return {
        rowspan: 0,
        colspan: 0
      }
    } else {
      let rowspan = 1
      for(let i = rowIndex + 1; i < tableData.length; i++) {
        if(tableData[i].col2 === row.col2) {
          rowspan++
        } else {
          break
        }
      }
      return {
        rowspan,
        colspan: 1
      }
      }
 }
}
</script>


<style lang="scss">
.totalRowClass {
  color: red;
  font-weight: bold;
  .el-table__cell {
    background-color: #e9e907 !important;
  }
}

.dailyReport {
  thead.is-group th.el-table__cell{
     color: black;  
   }
}
</style>

vue.js element-plus excel

阅读 2.3k

AI BotBETA

您可以使用第三方库，如 "xlsx" 和 "file-saver"，将表格数据导出为 Excel 文件。下面是一个基本的示例，展示了如何将 Vue 组件中的数据导出为 Excel 文件：

首先，安装所需的库：

npm install xlsx file-saver --save

然后，在您的 Vue 组件中，添加以下代码：

<template>
  <div>
    <el-table :data="tableData" style="width: 100%" :span-method="arraySpanMethod" :row-class-name="rowClassName" class="dailyReport">
      <!-- Your table code here -->
    </el-table>
    <button @click="exportToExcel">导出到 Excel</button>
  </div>
</template>

<script setup name="DailyReport">
import { saveAs } from 'file-saver'
import { tableToExcel } from 'xlsx'
import { arraySpanMethod, rowClassName } from './methods' // 假设你的方法在 methods.js 文件中

const tableData = [ /* Your table data here */ ]
const worksheetName = 'Sheet1' // Excel 工作表的名称
const worksheetData = [tableData] // 将表格数据转换为工作表数据格式

const workbook = { Sheets: { [worksheetName]: worksheetData }, SheetNames: [worksheetName] }
const excelData = tableToExcel(workbook, { header: ['列1', '列2', '列3'] }) // 根据需要添加列名
const blob = new Blob([excelData], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
saveAs(blob, 'output.xlsx') // 保存为 Excel 文件

exportToExcel() {
  // 导出到 Excel 的方法
  this.$refs.tableRef.exportToExcel() // 使用 Element UI 的 ref 属性调用导出方法（假设你已经设置了 ref）
}
</script>

这个示例代码中，我们首先将表格数据转换为适合 Excel 的格式。然后，我们创建一个新的 Blob 对象，该对象包含要保存为 Excel 文件的二进制数据。最后，我们使用 saveAs 方法将 Blob 对象保存为 Excel 文件。注意，这个示例代码使用了 Element UI 的 exportToExcel 方法，您需要确保您的 Vue 组件中已经设置了相应的 ref 属性。

1 个回答

得票最新

陟上晴明

21.4k144991

发布于
2024-01-17 浙江

✓ 已被采纳

导出PDF好说，可以直接 html2image 来处理。

如果你期望导出为Excel并且可编辑的话，得考虑用 ExcelJS。
但样式就需要你自己重写了，没办法直接套用页面中的el-table 的CSS样式。

撰写回答