fix : 修复分摊明细/汇总导出

src/components/DetailComponent/ExpenseDetail.vue

@@ -1,7 +1,8 @@
 <template>
-  <el-table ref="reportTable" :data="tableData" style="width: 100%;height: 300px" :span-method="objectSpanMethod" v-loading="loading">
-<!--        <el-table-column label="四川省国有资产经营投资管理有限责任公司-->
-<!--    科技创新项目人工成本分摊明细表" align="center">-->
+  <el-button color="#DED0B2" style="float: right;margin: 0 10px 10px 0" @click="exportTable">导出</el-button>
+  <el-table ref="reportTable" :data="tableData" style="width: 100%;height: 479px" :span-method="objectSpanMethod" v-loading="loading">
+    <!--        <el-table-column label="四川省国有资产经营投资管理有限责任公司-->
+    <!--    科技创新项目人工成本分摊明细表" align="center">-->
     <el-table-column v-for="column in columnInfo" :prop="column.prop" :label="column.label" align="center"
                      :fixed="(!column.children) ? ((column.prop === 'totalSeparation' || column.prop === 'totalSeparationCost') ? 'right' : 'left') : false"
                      :width="(column.prop === 'totalSeparation' || column.prop === 'totalSeparationCost') ? 160:130">
@@ -26,18 +27,14 @@
         </template>
       </template>
     </el-table-column>
-<!--        </el-table-column>-->
+    <!--        </el-table-column>-->
   </el-table>
-  <el-button @click="exportExcel">导出</el-button>
 </template>
 
 <script setup lang="jsx">
 import {getResearchUser, getAllocationDetailList, getAllocationDetails} from "@/api/expense-manage";
 import {ElNotification} from "element-plus";
-// import * as XLSX from "xlsx";
-import {utils} from "xlsx";
-import FileSaver from 'file-saver'
-import XLSX from "xlsx-style-vite";
+import {exportExcel} from "@/utils/export-excel";
 
 const route = useRoute()
 const tableIns = ref()
@@ -162,118 +159,12 @@ getResearchOptions()
 init()
 
 
-const exportExcel = () => {
-  //如果导出后多出空白行则修改rowspan，否则可不用
-  // var tds = document.querySelectorAll(".el-table__footer td");
-  // tds.forEach(td => td.setAttribute("rowspan", "1"));
+const exportTable = () => {
   const $e = reportTable.value.$el
   let $table = $e.querySelector('.el-table__fixed')
   if (!$table) {
     $table = $e
   }
-  //从el-table表生成工作簿对象
-  //使用原始的格式,保留表格中的格式如%、小数末尾的0等
-  let workbook = utils.table_to_book($table, {
-    raw: true
-  });
-  //列宽，需要导出的表格有多少列这里的i就小于多少
-  let keys = Object.keys(tableData.value[0]).length
-  for (let i = 1; i < (5 + (keys - 5) * 5); i++) {
-    workbook.Sheets.Sheet1["!cols"].push({wpx: 100});
-  }
-  //设置单元格样式
-  for (const key in workbook.Sheets.Sheet1) {
-    if (
-        key !== "!cols" &&
-        key !== "!fullref" &&
-        key !== "!merges" &&
-        key !== "!ref" &&
-        key !== "!rows"
-    ) {
-      //这里的s就是具体的样式，如果想设置不一样的样式可以看xlsx-style文档
-      workbook.Sheets.Sheet1[key].s = {
-        //边框
-        border: {
-          top: {style: "thin"},
-          bottom: {style: "thin"},
-          left: {style: "thin",},
-          right: {style: "thin",}
-        },
-        //对齐
-        alignment: {
-          horizontal: "center",
-          vertical: "center",
-          wrapText: true
-        }
-      };
-    }
-  }
-  //修改合并单元格样式
-  let arr = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N",
-    "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
-  //由于导出时合并单元格只识别左上角的单元格，合并单元格中其他单元格
-  //并不会存在，所以需要识别合并单元格中除左上角单元格外的单元格并添加
-  //带样式的单元格到其中，不理解可以看四中的第2点。
-  for (let item of workbook.Sheets.Sheet1["!merges"]) {
-    let style = {
-      border: {
-        top: {style: "thin"},
-        bottom: {style: "thin"},
-        left: {style: "thin",},
-        right: {style: "thin",}
-      },
-      alignment: {
-        horizontal: "center",
-        vertical: "center",
-        wrapText: true
-      }
-    };
-    let merge_s = {t: "s", v: "", s: style};
-    if (item.s.c === item.e.c) {
-      //纵向合并，其中c为字母r为数字
-      let star = item.s.r;
-      let end = item.e.r;
-      for (let i = star + 1; i <= end; i++) {
-        workbook.Sheets.Sheet1[arr[item.s.c] + (i + 1)] = merge_s;
-      }
-    } else {
-      //横向合并
-      let star = item.s.c;
-      let end = item.e.c;
-      for (let i = star; i < end; i++) {
-        workbook.Sheets.Sheet1[arr[i + 1] + Number(item.s.r + 1)] = merge_s;
-      }
-    }
-  }
-
-  //将表格数据中的字符串转ArrayBuffer
-  function s2ab(s) {
-    let buf = new ArrayBuffer(s.length);
-    let view = new Uint8Array(buf);
-    for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
-    return buf;
-  }
-
-  //这里的属性可以参考xlsx-style文档
-  let wbout = XLSX.write(workbook, {
-    bookType: "xlsx",
-    bookSST: false,
-    type: "binary"
-  });
-  try {
-    FileSaver.saveAs(
-        new Blob([s2ab(wbout)], {type: "application/octet-stream"}),
-        "四川省国有资产经营投资管理有限责任公司科技创新项目人工成本分摊明细表.xlsx"
-    );
-  } catch (e) {
-    if (typeof console !== "undefined") console.log(e, wbout);
-  }
+  exportExcel($table, tableData.value[0], "四川省国有资产经营投资管理有限责任公司科技创新项目人工成本分摊明细表")
 }
 </script>
-
-<style scoped>
-:deep(.el-table--fit ) {
-  width: 100%;
-  height: 479px !important;
-}
-</style>