如何将vue3项目下的el-table表格导出到 excel 并保留样式和数据的展现形式？
需求是要将 图示的表格 导出到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>
回答：
导出PDF好说，可以直接 html2image 来处理。
如果你期望导出为Excel并且可编辑的话， 得考虑用 ExcelJS。
但样式就需要你自己重写了，没办法直接套用页面中的el-table 的CSS样式。
以上是 如何将vue3项目下的el-table表格导出到 excel 并保留样式和数据的展现形式？ 的全部内容， 来源链接： utcz.com/p/935326.html
