✨(component): 实现 table 复杂表头 与 单元格合并 的导出兼容

package/component/src/component/table/TableRow.vue

@@ -176,7 +176,11 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
     if (column.fixed == "left") {
       var left = 0;
       for (var i = 0; i < columnIndex; i++) {
-        if (props.columns[i].fixed && props.columns[i].fixed == "left" && props.tableColumnKeys.includes(props.columns[i].key)) {
+        if (
+          props.columns[i].fixed &&
+          props.columns[i].fixed == "left" &&
+          props.tableColumnKeys.includes(props.columns[i].key)
+        ) {
           left = left + props.columns[i]?.width.replace("px", "");
         }
       }
@@ -184,7 +188,11 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
     } else {
       var right = 0;
       for (var i = columnIndex + 1; i < props.columns.length; i++) {
-        if (props.columns[i].fixed && props.columns[i].fixed == "right" && props.tableColumnKeys.includes(props.columns[i].key)) {
+        if (
+          props.columns[i].fixed &&
+          props.columns[i].fixed == "right" &&
+          props.tableColumnKeys.includes(props.columns[i].key)
+        ) {
           right = right + props.columns[i]?.width.replace("px", "");
         }
       }
@@ -193,7 +201,10 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
   } else {
     var isLast = true;
     for (var i = columnIndex + 1; i < props.columns.length; i++) {
-      if (props.columns[i].fixed == undefined && props.tableColumnKeys.includes(props.columns[i].key)) {
+      if (
+        props.columns[i].fixed == undefined &&
+        props.tableColumnKeys.includes(props.columns[i].key)
+      ) {
         isLast = false;
       }
     }
@@ -207,7 +218,11 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
     if (column.fixed == "left") {
       var left = true;
       for (var i = columnIndex + 1; i < props.columns.length; i++) {
-        if (props.columns[i].fixed && props.columns[i].fixed == "left" && props.tableColumnKeys.includes(props.columns[i].key)) {
+        if (
+          props.columns[i].fixed &&
+          props.columns[i].fixed == "left" &&
+          props.tableColumnKeys.includes(props.columns[i].key)
+        ) {
           left = false;
         }
       }
@@ -215,7 +230,11 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
     } else {
       var right = true;
       for (var i = 0; i < columnIndex; i++) {
-        if (props.columns[i].fixed && props.columns[i].fixed == "right" && props.tableColumnKeys.includes(props.columns[i].key)) {
+        if (
+          props.columns[i].fixed &&
+          props.columns[i].fixed == "right" &&
+          props.tableColumnKeys.includes(props.columns[i].key)
+        ) {
           right = false;
         }
       }

package/component/src/component/table/index.vue

@@ -325,47 +325,55 @@ const print = function () {
   document.body.innerHTML = oldContent;
 };
 
+/**
+ * excel 导出 
+ */
 const exportData = () => {
-  const head: any = [];
+  var tableStr = ``;
-  const body: any = [];
+  for(let tableHeadColumn of tableHeadColumns.value){
-  tableColumns.value.forEach((item) => {
+    tableStr += '<tr>';
-    try {
+    for(let column of tableHeadColumn){
-      tableDataSource.value.forEach((dataItem) => {
+      tableStr += `<td colspan=${column.colspan} rowspan=${column.rowspan}>${column.title}</td>`
-        if (dataItem[item.key] != undefined) {
-          head.push(item.title);
-          throw new Error("exception");
     } 
-      });
+    tableStr += '</tr>';
-    } catch (e) {}
+  }
-  });
+  tableDataSource.value.forEach((item, rowIndex) => {
-  tableDataSource.value.forEach((item) => {
+    tableStr += '<tr>'
-    let obj: any = [];
+    tableBodyColumns.value.forEach((tableColumn, columnIndex) => {
-    tableColumns.value.forEach((tableColumn) => {
       Object.keys(item).forEach((name) => {
         if (tableColumn.key === name) {
-          obj.push(item[name]);
+          const rowColSpan = props.spanMethod(item, tableColumn, rowIndex, columnIndex);
+          const rowspan = rowColSpan ? rowColSpan[0] : 1;
+          const colspan = rowColSpan ? rowColSpan[1] : 1;
+          if(rowspan != 0 && colspan != 0) {
+            tableStr += `<td colspan=${colspan} rowspan=${rowspan}>${item[name]}</td>`
+          }
         }
       }); 
     });  
-    body.push(obj);
+    tableStr += '</tr>'
   });
-  exportToExcel(head, body);
+  var worksheet = "Sheet1";
+  var uri = "data:application/vnd.ms-excel;base64,";
+  var exportTemplate = 
+    `<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" 
+        xmlns="http://www.w3.org/TR/REC-html40">
+        <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
+            <x:Name>${worksheet}</x:Name>
+                <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
+            </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
+        </head>
+        <body>
+            <table syle="table-layout: fixed;word-wrap: break-word; word-break: break-all;">${tableStr}</table>
+        </body>
+    </html>`;
+  window.location.href = uri + base64(exportTemplate);
   return;
 };
 
-function exportToExcel(headerList: any, bodyList: any) {
+//输出base64编码
-  let excelList = [];
+function base64(s: string) {
-  excelList.push(headerList.join("\t,"));
+  return window.btoa(unescape(encodeURIComponent(s)));
-  excelList.push("\n");
-  bodyList.forEach((item: any) => {
-    excelList.push(item.join("\t,"));
-    excelList.push("\n");
-  });
-  var merged = excelList.join("");
-  let link = document.createElement("a");
-  link.href = "data:text/xls;charset=utf-8,\ufeff" + encodeURIComponent(merged);
-  link.download = `table.xls`;
-  link.click();
 }
 
 const sortTable = (e: any, key: string, sort: string) => {
@@ -481,7 +489,11 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
     if (column.fixed == "left") {
       var left = 0;
       for (var i = 0; i < columnIndex; i++) {
-        if (props.columns[i].fixed && props.columns[i].fixed == "left" && tableColumnKeys.value.includes(props.columns[i].key)) {
+        if (
+          props.columns[i].fixed &&
+          props.columns[i].fixed == "left" &&
+          tableColumnKeys.value.includes(props.columns[i].key)
+        ) {
           left = left + props.columns[i]?.width.replace("px", "");
         }
       }
@@ -489,7 +501,11 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
     } else {
       var right = 0;
       for (var i = columnIndex + 1; i < props.columns.length; i++) {
-        if (props.columns[i].fixed && props.columns[i].fixed == "right" && tableColumnKeys.value.includes(props.columns[i].key)) {
+        if (
+          props.columns[i].fixed &&
+          props.columns[i].fixed == "right" &&
+          tableColumnKeys.value.includes(props.columns[i].key)
+        ) {
           right = right + props.columns[i]?.width.replace("px", "");
         }
       }
@@ -498,7 +514,10 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
   } else {
     var isLast = true;
     for (var i = columnIndex + 1; i < props.columns.length; i++) {
-      if (props.columns[i].fixed == undefined && tableColumnKeys.value.includes(props.columns[i].key)) {
+      if (
+        props.columns[i].fixed == undefined &&
+        tableColumnKeys.value.includes(props.columns[i].key)
+      ) {
         isLast = false;
       }
     }
@@ -515,7 +534,11 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
     if (column.fixed == "left") {
       var left = true;
       for (var i = columnIndex + 1; i < props.columns.length; i++) {
-        if (props.columns[i].fixed && props.columns[i].fixed == "left" && tableColumnKeys.value.includes(props.columns[i].key)) {
+        if (
+          props.columns[i].fixed &&
+          props.columns[i].fixed == "left" &&
+          tableColumnKeys.value.includes(props.columns[i].key)
+        ) {
           left = false;
         }
       }
@@ -523,7 +546,11 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
     } else {
       var right = true;
       for (var i = 0; i < columnIndex; i++) {
-        if (props.columns[i].fixed && props.columns[i].fixed == "right" && tableColumnKeys.value.includes(props.columns[i].key)) {
+        if (
+          props.columns[i].fixed &&
+          props.columns[i].fixed == "right" &&
+          tableColumnKeys.value.includes(props.columns[i].key)
+        ) {
           right = false;
         }
       }

package/document-component/src/document/zh-CN/components/table.md

@@ -1004,7 +1004,7 @@ export default {
 ::: demo 通过 `span-method` 属性, 自定义行列合并的逻辑。
 
 <template>
-  <lay-table :columns="columns27" :data-source="dataSource27" :span-method="spanMethod27"></lay-table>
+  <lay-table :columns="columns27" :data-source="dataSource27" :span-method="spanMethod27" :default-toolbar="true"></lay-table>
 </template>
 
 <script>