问题：
vue.js - 如何将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>共有2个答案
阮梓
导出PDF好说，可以直接 html2image 来处理。
如果你期望导出为Excel并且可编辑的话， 得考虑用 ExcelJS。
但样式就需要你自己重写了，没办法直接套用页面中的el-table 的CSS样式。
端木元青
您可以使用第三方库，如 "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 属性。
类似资料：
-
本文向大家介绍基于JS实现table导出Excel并保留样式，包括了基于JS实现table导出Excel并保留样式的使用技巧和注意事项，需要的朋友参考一下 浏览器环境：谷歌浏览器 1.在导出Excel的时候，保存table的样式，有2种方法，①是在table的行内写style样式，②是在模板里面添加样式 2.第一种方式：行内添加样式 <td>公司一</td> 效果： 完整代码： 3.第二种方式：在
-
我正在使用Apache POI读取一个现有的模板excel文件，并希望复制一些标题行中的现有样式，并将它们应用到新的单元格中。 当我这样做时： 所以它使我认为我没有正确阅读格式。对如何完成这件事有什么想法吗？
-
我几乎完成了一个大型宏的构建，但我遇到了最后的绊脚石。我制作了一个带有期望值的工作表，现在需要将其导出为XML格式。我只需要导出这个名为“Output”的特定工作表。当我导出为文本时存在问题，因此必须创建一个Sub exportToXML以删除导出时产生的一些引号。这工作正常。但是当我导出时，我必须手动输入我想要的目录和文件名在输出文件上，这不好。目录可能会不时更改，文件名也会更改。 错误转到En
-
el-table 如何根据表格数据合并行。 如图所示，name列的值一样，就合并成一行；Amount 1列合并成3行 演示地址
-
vue表格实现 使用vxe-table（树形表格&&展开行表格） 这个使用什么组件库合适 思路 1.将数据处理为一维数组，并在父节点行数据中设置chirldren属性存放子数据，点击全部时通过删除数组中的子数据达到展开收缩效果，----这样不知道合理不合理，求一个更好的解决方法 更新进度： 没有使用上述方法，使用了两次vxe-table 中的tree-node属性，这样会有这样的警告，暂不处理 [
-
本文向大家介绍c# 将Datatable数据导出到Excel表格中，包括了c# 将Datatable数据导出到Excel表格中的使用技巧和注意事项，需要的朋友参考一下 话不多说，请看代码： 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！