emacroh5lib 1.0.2 → 1.0.3

package/src/views/TestView/Export2Excel.ts

@@ -0,0 +1,496 @@
+
+import * as  XLSX from 'xlsx'
+import * as XLSXS from 'xlsx-style'
+import { saveAs } from 'file-saver'
+import { BookType } from 'xlsx';
+
+
+export function generateArray(table: any) {
+  let out: Array<any> = [];
+  let rows = table.querySelectorAll("tr");
+  let ranges: Array<any> = [];
+  for (let R = 0; R < rows.length; ++R) {
+    let outRow: Array<any> = [];
+    let row = rows[R];
+    let columns = row.querySelectorAll("td");
+    for (let C = 0; C < columns.length; ++C) {
+      let cell = columns[C];
+      let colspan = cell.getAttribute("colspan");
+      let rowspan = cell.getAttribute("rowspan");
+      let cellValue = cell.innerText;
+      if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;
+
+      //Skip ranges
+      ranges.forEach(function (range: any) {
+        if (
+          R >= range.s.r &&
+          R <= range.e.r &&
+          outRow.length >= range.s.c &&
+          outRow.length <= range.e.c
+        ) {
+          for (let i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
+        }
+      });
+
+      //Handle Row Span
+      if (rowspan || colspan) {
+        rowspan = rowspan || 1;
+        colspan = colspan || 1;
+        ranges.push({
+          s: {
+            r: R,
+            c: outRow.length
+          },
+          e: {
+            r: (R + rowspan - 1),
+            c: (outRow.length + colspan - 1)
+          }
+        });
+      }
+
+      //Handle Value
+      outRow.push(cellValue !== "" ? cellValue : null);
+
+      //Handle Colspan
+      if (colspan)
+        for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
+    }
+    out.push(outRow);
+  }
+  return [out, ranges];
+}
+
+export function datenum(v: any, date1904: any = null): number {
+  if (date1904) v += 1462;
+  let epoch = Date.parse(v);
+  return (epoch - new Date(Date.UTC(1899, 11, 30)).getTime()) / (24 * 60 * 60 * 1000);
+}
+
+export function sheet_from_array_of_arrays(data: any, opts: any = null) {
+
+  if (!opts) {
+    opts = ""
+  }
+
+  var ws: any = {};
+  var range = {
+    s: {
+      c: 10000000,
+      r: 10000000
+    },
+    e: {
+      c: 0,
+      r: 0
+    }
+  };
+  for (var R = 0; R != data.length; ++R) {
+    for (var C = 0; C != data[R].length; ++C) {
+      if (range.s.r > R) range.s.r = R;
+      if (range.s.c > C) range.s.c = C;
+      if (range.e.r < R) range.e.r = R;
+      if (range.e.c < C) range.e.c = C;
+      let cell: any = {
+        v: data[R][C]
+      };
+      // 如果单元格所在的值为空，让其值为“”，否则下面设置的边框对其不生效
+      if (cell.v == null) {
+        cell.v = "";
+      }
+      var cell_ref = XLSX.utils.encode_cell({
+        c: C,
+        r: R
+      });
+
+      if (typeof cell.v === "number") cell.t = "n";
+      else if (typeof cell.v === "boolean") cell.t = "b";
+      else if (cell.v instanceof Date) {
+        cell.t = "n";
+        cell.z = XLSX.SSF._table[14];
+        cell.v = datenum(cell.v);
+      } else cell.t = "s";
+
+      ws[cell_ref] = cell;
+    }
+  }
+  if (range.s.c < 10000000) ws["!ref"] = XLSX.utils.encode_range(range);
+  return ws;
+}
+
+class Workbook {
+
+  public SheetNames: any;
+  public Sheets: any;
+
+  constructor() {
+    if (!(this instanceof Workbook)) return new Workbook();
+    this.SheetNames = [];
+    this.Sheets = {};
+  }
+
+}
+
+export function s2ab(s: any) {
+  var buf = new ArrayBuffer(s.length);
+  var view = new Uint8Array(buf);
+  for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
+  return buf;
+}
+
+export function export_table_to_excel(id: string) {
+  var theTable = document.getElementById(id);
+  var oo = generateArray(theTable);
+  var ranges = oo[1];
+
+  /* original data */
+  var data = oo[0];
+  var ws_name = "SheetJS";
+
+  var wb = new Workbook(),
+    ws = sheet_from_array_of_arrays(data);
+
+  /* add ranges to worksheet */
+  // ws['!cols'] = ['apple', 'banan'];
+  ws["!merges"] = ranges;
+
+  /* add worksheet to workbook */
+  wb.SheetNames.push(ws_name);
+  wb.Sheets[ws_name] = ws;
+
+  var wbout = XLSX.write(wb, {
+    bookType: "xlsx",
+    bookSST: false,
+    type: "binary"
+  });
+
+  saveAs(
+    new Blob([s2ab(wbout)], {
+      type: "application/octet-stream"
+    }),
+    "test.xlsx"
+  );
+}
+
+//数字转excel表头
+export function number_to_excel(number: number) {
+  let str_1 = Math.floor(number / 26)
+  let str_2 = Math.round(number % 26) + 1
+  return (str_1 ? String.fromCharCode(0x60 + (str_1)).toUpperCase() : '') + String.fromCharCode(0x60 + (str_2)).toUpperCase();
+}
+// 主要修改内容在这里
+export function export_json_to_excel({
+  title = null, // 新增的参数，表格标题
+  multiHeader = new Array<any>(),
+  header = new Array<any>(),
+  data = new Array<any>(),
+  filename = "excel-list",
+  styles = {} as any,
+  merges = new Array<any>(),
+  autoWidth = true,
+  bookType = "xlsx"
+} = {}) {
+  /* original data */
+
+  console.log("样式", styles);
+  
+
+  data = [...data];
+  data.unshift(header);
+  for (let i = multiHeader.length - 1; i > -1; i--) {
+    data.unshift(multiHeader[i]);
+  }
+  if (title) {
+    data.unshift(title); // 表格标题
+  }
+  var ws_name = "SheetJS";
+  var wb = new Workbook(),
+    ws = sheet_from_array_of_arrays(data);
+
+  if (merges.length > 0) {
+    if (!ws["!merges"]) ws["!merges"] = [];
+    merges.forEach(item => {
+      ws["!merges"].push(XLSX.utils.decode_range(item));
+    });
+  }
+
+  // 设置单元格宽度
+  if (autoWidth) {
+    /*设置worksheet每列的最大宽度*/
+    const colWidth = data.map(row =>
+      row.map((val: any) => {
+        /*先判断是否为null/undefined*/
+        if (val == null || val == undefined) {
+          return {
+            wch: 10
+          };
+        } else if ((val.toString().charCodeAt(3) || val.toString().charCodeAt(0)) > 255) {
+          /*再判断是否为中文*/
+          return {
+            wch: 10 + val.toString().length * 2
+          };
+        } else {
+          return {
+            wch: 10 + val.toString().length * 1.5
+          };
+        }
+      })
+    );
+    /*如果第一行是表格标题，会比较长，以主表第二行为初始值*/
+    let result = colWidth[title ? 1 : 0];
+    for (let i = 1; i < colWidth.length; i++) {
+      for (let j = 0; j < colWidth[i].length; j++) {
+        if (result[j] && result[j]["wch"] < colWidth[i][j]["wch"]) {
+          result[j]["wch"] = colWidth[i][j]["wch"];
+        }
+      }
+    }
+    ws["!cols"] = result;
+  }
+  /* add worksheet to workbook */
+  wb.SheetNames.push(ws_name);
+  wb.Sheets[ws_name] = ws;
+
+  var dataInfo = wb.Sheets[wb.SheetNames[0]];
+  // 设置单元格框线
+  const borderAll = {
+    top: {
+      style: "thin"
+    },
+    bottom: {
+      style: "thin"
+    },
+    left: {
+      style: "thin"
+    },
+    right: {
+      style: "thin"
+    }
+  };
+
+  // 给所有单元格加上边框，内容居中，字体，字号，标题表头特殊格式部分后面替换
+  for (var i in dataInfo) {
+    if (
+      i == "!ref" ||
+      i == "!merges" ||
+      i == "!cols" ||
+      i == "!rows" ||
+      i == "A1"
+    ) { } else {
+      dataInfo[i + ""].s = {
+        border: borderAll,
+        alignment: {
+          horizontal: "center",
+          vertical: "center"
+        },
+        font: {
+          name: "微软雅黑",
+          sz: 10
+        }
+      };
+      if (styles[i.replace(/[^A-Z]+/ig, '')]) {
+        Object.assign(dataInfo[i + ""].s, styles[i.replace(/[^A-Z]+/ig, '')])
+      }
+    }
+  }
+
+  // 设置表格样式
+  const arrabc = ["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"
+  ]
+
+  // 给标题、表格描述信息、表头等部分加上特殊格式
+  arrabc.some(function (v) {
+    for (let j = 1; j < multiHeader.length + (title ? 3 : 2); j++) {
+      const _v = v + j
+      if (dataInfo[_v]) {
+        dataInfo[_v].s = {};
+        // 标题部分A1-Z1
+        if (j == 1) {
+          dataInfo[v + j].s = {
+            font: {
+              name: "微软雅黑",
+              sz: 12,
+              color: {
+                rgb: "000000"
+              },
+              bold: true,
+              italic: false,
+              underline: false
+            },
+            alignment: {
+              horizontal: "center",
+              vertical: "center"
+            }
+          };
+        } else {
+          // 表头部分,根据表头特殊格式设置
+          if (multiHeader.length == 0) {
+            // multiHeader.length = 0 时表头没有合并单元格，表头只占1行A2-Z2
+            const fv = v + (multiHeader.length + (title ? 2 : 1))
+            dataInfo[fv].s = {
+              border: borderAll,
+              font: {
+                name: "微软雅黑",
+                sz: 12,
+                bold: true
+              },
+              alignment: {
+                horizontal: "center",
+                vertical: "center"
+              },
+              fill: {
+                fgColor: {
+                  rgb: "f0f0f0"
+                },
+              },
+            }
+          } else if (multiHeader.length == 1) {
+            // multiHeader.length = 0 时表头有合并单元格，表头只占2行A2-Z2，A3-Z3，这是没有描述信息只有表头合并的
+            dataInfo[v + j].s = {
+              border: borderAll,
+              font: {
+                name: "微软雅黑",
+                sz: 12,
+              },
+              alignment: {
+                horizontal: "center",
+                vertical: "center"
+              },
+              fill: {
+                fgColor: {
+                  rgb: "f0f0f0"
+                }
+              },
+            }
+          } else {
+            // multiHeader.length = 0 时表头有合并单元格，表头多行
+            dataInfo[v + j].s = {
+              border: borderAll,
+              font: {
+                name: "微软雅黑",
+                sz: 10,
+              },
+              alignment: {
+                horizontal: "left",
+                vertical: "center"
+              }
+            }
+          }
+        }
+        // multiHeader.length + 2 是表头的最后1行
+        // console.log(dataInfo,dataInfo[v + (multiHeader.length + 2)],v + (multiHeader.length + 2))
+        dataInfo[v + (multiHeader.length + (title ? 2 : 1))].s = {
+          border: borderAll,
+          font: {
+            name: "微软雅黑",
+            sz: 12,
+          },
+          alignment: {
+            horizontal: "center",
+            vertical: "center"
+          },
+          fill: {
+            fgColor: {
+              rgb: "f0f0f0"
+            }
+          },
+        }
+      }
+    }
+  });
+
+
+
+  let wbout = XLSX.write(wb, {
+    bookType: bookType as BookType,
+    bookSST: false,
+    type: "binary"
+  });
+  saveAs(
+    new Blob([s2ab(wbout)], {
+      type: "application/octet-stream"
+    }),
+    `${filename}.${bookType}`
+  );
+}
+
+export function formatJson(filterVal: any, jsonData: any) {
+  jsonData.map((row: any, index: number) => {
+    row.index = index + 1;
+  });
+  return jsonData.map((v: any) =>
+    filterVal.map((j: any) => {
+      return v[j];
+    })
+  );
+}
+
+export function testToExcel(e: any) {
+  console.log("testToExcel", e);
+
+
+  let header = ['标签', '姓名', '性别', '出生年月日'];
+  let filterVal = ["tag", "childName", "gender", "birthday"];
+  let list = [{
+    tag: '示例班',
+    childName: '示例',
+    gender: '男',
+    birthday: '2016/10/12',
+  }];
+  let data = formatJson(filterVal, list);
+
+  let styles: any = {};//按列改样式
+  let length_str = number_to_excel(header.length - 1)
+  console.log("length_str", length_str);
+  
+  styles["D1"] = {
+    alignment: {
+      horizontal: "center",
+    },
+    font: {
+      color: {
+        rgb: "DE3151"
+      },
+    }
+  }
+  let merges = ["A2:A64"] as never[];
+  export_json_to_excel({
+    filename: "这是一个表格",
+    header,
+    autoWidth: true,
+    merges: merges,
+    styles: styles,
+    data: data,
+  });
+}
+
+export default {
+  formatJson,
+  number_to_excel,
+  export_json_to_excel,
+  export_table_to_excel,
+  testToExcel
+}

package/src/views/TestView/index.less

@@ -0,0 +1,25 @@
+.app-container {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0; 
+}
+
+.filler {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.list {
+  position: absolute;
+  top: 30px;
+  bottom: 30px;
+  left: 30px;
+  right: 300px;
+  box-shadow: 0 0 2px #AAA;
+  background-color: white;
+}