ele-admin-plus 1.0.0-beta.1

package/es/utils/printer.d.ts

@@ -0,0 +1,100 @@
+/**
+ * 打印参数
+ */
+export interface PrintOption {
+    hide?: string | HTMLElement | Array<string | HTMLElement>;
+    horizontal?: boolean;
+    blank?: boolean;
+    close?: boolean;
+    margin?: string | number;
+    title?: string;
+    isHideNone?: boolean;
+}
+/**
+ * 打印任意内容参数
+ */
+export interface PrintHtmlOption extends PrintOption {
+    html?: string;
+    print?: boolean;
+    loading?: boolean;
+    header?: string;
+    footer?: string;
+    before?: () => void;
+    done?: () => void;
+    style?: string;
+}
+/**
+ * 分页打印参数
+ */
+export interface PrintPageOption extends Omit<PrintHtmlOption, 'html'> {
+    pages?: string[];
+    padding?: string | number;
+    width?: string | number;
+    height?: string | number;
+    isDebug?: boolean;
+}
+/**
+ * pdf 打印参数
+ */
+export interface PrintPdfOption {
+    url?: string;
+    arraybuffer?: ArrayBuffer;
+    loading?: boolean;
+    before?: () => void;
+    done?: () => void;
+    error?: (status: number, result: string) => void;
+}
+/**
+ * 生成表格列参数配置
+ */
+export interface ColOption<T> {
+    INIT_OK?: boolean;
+    key?: string;
+    parentKey?: string;
+    colGroup?: boolean;
+    HAS_PARENT?: boolean;
+    PARENT_COL_INDEX?: number;
+    CHILD_COLS?: ColOption<T>[];
+    field?: string;
+    title?: string;
+    width?: number;
+    align?: string;
+    thAlign?: string;
+    style?: string;
+    thStyle?: string;
+    colspan?: number;
+    rowspan?: number;
+    templet?: (d: T, index?: number, colIndex?: number) => any;
+}
+/**
+ * 打印当前页面
+ * @param option 参数配置
+ */
+export declare function printThis(option?: PrintOption): Window | null;
+/**
+ * 打印任意内容
+ * @param option PrintHtmlOption
+ */
+export declare function printHtml(option: PrintHtmlOption): Window | null;
+/**
+ * 分页打印
+ * @param option PrintPageOption
+ */
+export declare function printPage(option: PrintPageOption): Window | null;
+/**
+ * 打印 pdf
+ * @param option PrintPdfOption
+ */
+export declare function printPdf(option: PrintPdfOption): Window | null;
+/**
+ * 生成表格 html
+ * @param data 数据
+ * @param cols 列配置
+ */
+export declare function makeTable<T>(data: T[], cols: Array<ColOption<T>[]>): string;
+/**
+ * 打印指定区域
+ * @param elem HTMLElement
+ * @param option 参数配置
+ */
+export declare function printElement(elem?: HTMLElement | null, option?: PrintOption): Window | null;

package/es/utils/printer.js

@@ -0,0 +1,612 @@
+import { uuid } from "./core";
+const printFrameId = "ele-printer-iframe";
+const printStyleId = "ele-printer-style";
+const printOptionId = "ele-printer-option";
+const loadingId = "ele-printer-loading";
+const printingClass = "ele-printer-printing";
+const hideClass = "ele-printer-hide";
+const hideNoneClass = "ele-printer-none";
+function getPrintFrame() {
+  const pFrame = document.getElementById(printFrameId);
+  if (pFrame && pFrame.parentNode) {
+    pFrame.parentNode.removeChild(pFrame);
+  }
+  const elem = document.createElement("iframe");
+  elem.id = printFrameId;
+  elem.style.width = "0px";
+  elem.style.height = "0px";
+  elem.style.position = "fixed";
+  elem.style.visibility = "hidden";
+  document.body.appendChild(elem);
+  elem.focus();
+  return elem;
+}
+function getCommonCss(isPrinting = false) {
+  return `
+   @media print {
+     html, body {
+       padding: 0;
+       margin: 0;
+     }
+   }
+
+   /* 打印时不显示的元素 */
+   .${hideClass}.${printingClass}${isPrinting ? ",." + hideClass : ""} {
+     visibility: hidden !important;
+   }
+   .${hideClass}.${printingClass}.${hideNoneClass} {
+     display: none !important;
+   }
+   .${hideClass}.${hideNoneClass} {
+     ${isPrinting ? "display: none !important;" : ""}
+   }
+
+   /* 表格样式 */
+   .ele-printer-table {
+     width: 100%;
+     border-collapse: collapse;
+     border: none;
+   }
+   .ele-printer-table td, .ele-printer-table th {
+     color: #333;
+     padding: 9px 15px;
+     border: 1px solid #333;
+     word-break: break-all;
+   }
+
+   /* loading 样式 */
+   #${loadingId} {
+     position: fixed;
+     top: 0;
+     left: 0;
+     right: 0;
+     bottom: 0;
+     background-color: hsla(0, 0%, 100%, .9);
+     z-index: 19000000;
+   }
+   #${loadingId}::after {
+     content: "";
+     width: 40px;
+     height: 40px;
+     position: absolute;
+     top: 50%;
+     left: 50%;
+     margin: -20px auto auto -20px;
+     border: 2px solid #3296FA;
+     border-right-color: transparent;
+     border-bottom-color: transparent;
+     border-radius: 50%;
+     animation: ele-printer-loading-anim .8s linear infinite;
+   }
+   @keyframes ele-printer-loading-anim {
+     from {
+       transform: rotate(0deg);
+     }
+     to {
+       transform: rotate(360deg);
+     }
+   }
+
+   /* 带页眉页脚页面样式 */
+   .ele-printer-table-page {
+     width: 100%;
+     border-collapse: collapse;
+     border: none;
+   }
+   .ele-printer-table-page > thead > tr > td,
+   .ele-printer-table-page > tbody > tr > td,
+   .ele-printer-table-page > tfoot > tr > td {
+     padding: 0;
+     border: none;
+   }
+ `;
+}
+function getPageStyleHtml(padding, width, height) {
+  return `
+   <style>
+     body {
+       margin: 0 !important;
+     }
+
+     /* 自定义边距及宽高样式 */
+     .ele-printer-page .ele-printer-page-item {
+       width: ${width ?? "auto"};
+       height: ${height ?? "auto"};
+       padding: ${padding ?? "0"};
+       page-break-after: always !important;
+       box-sizing: border-box !important;
+       border: none !important;
+       position: relative;
+     }
+
+     /* 调试模式样式 */
+     .ele-printer-page.ele-printer-debug .ele-printer-page-item {
+       border: 1px solid red !important;
+     }
+
+     /* 全局样式 */
+     ${getCommonCss(true)}
+   </style>
+ `;
+}
+function getOptionHtml(option) {
+  const { beforeJs, doneJs } = addCallback(option.before, option.done);
+  const blank = option.blank;
+  const closeJs = blank && option.close !== false ? "window.close();" : "";
+  const hideLoadJs = "parent.hideElePrinterLoading&&parent.hideElePrinterLoading();";
+  const optHtml = [];
+  optHtml.push(`<style type="text/css" media="print" id="${printOptionId}">`);
+  optHtml.push("@page {");
+  if (typeof option.horizontal !== "undefined") {
+    optHtml.push(`size: ${option.horizontal ? "landscape" : "portrait"};`);
+  }
+  if (option.margin != null) {
+    optHtml.push(`margin: ${option.margin};`);
+  }
+  optHtml.push(`}`);
+  optHtml.push(`</style>`);
+  if (option.print !== false) {
+    optHtml.push(`
+     <script>
+       window.onload = function() {
+         ${beforeJs}
+         window.print();
+         ${hideLoadJs}
+         ${doneJs}
+         ${closeJs}
+       }
+     <\/script>
+   `);
+  }
+  return optHtml.join("");
+}
+function addCommonCss() {
+  if (!document.getElementById(printStyleId)) {
+    const elem = document.createElement("style");
+    elem.id = printStyleId;
+    elem.setAttribute("type", "text/css");
+    elem.innerHTML = getCommonCss();
+    document.body.appendChild(elem);
+  }
+}
+function addHeaderFooter(html, header, footer) {
+  if (!header && !footer) {
+    return html ?? "";
+  }
+  let result = '<table class="ele-printer-table-page">';
+  if (header) {
+    result += `<thead><tr><td>${header}</td></tr></thead>`;
+  }
+  result += `<tbody><tr><td>${html ?? ""}</td></tr></tbody>`;
+  if (footer) {
+    result += `<tfoot><tr><td>${footer}</td></tr></tfoot>`;
+  }
+  return result + "</table>";
+}
+function addCallback(before, done) {
+  const taskId = "p" + uuid(8);
+  if (!window["elePrinterBefore"]) {
+    window["elePrinterBefore"] = {};
+  }
+  if (!window["elePrinterDone"]) {
+    window["elePrinterDone"] = {};
+  }
+  if (before) {
+    window["elePrinterBefore"][taskId] = before;
+  }
+  if (done) {
+    window["elePrinterDone"][taskId] = done;
+  }
+  const beforeJs = `;parent.elePrinterBefore&&parent.elePrinterBefore.${taskId}&&parent.elePrinterBefore.${taskId}();`;
+  const doneJs = `;parent.elePrinterDone&&parent.elePrinterDone.${taskId}&&parent.elePrinterDone.${taskId}();`;
+  return { taskId, beforeJs, doneJs };
+}
+function hideElem(elems, isNone) {
+  var _a, _b;
+  Array.from(document.getElementsByClassName(hideClass)).forEach((elem) => {
+    if (elem == null ? void 0 : elem.classList) {
+      elem.classList.add(printingClass);
+    }
+  });
+  if (!elems) {
+    return;
+  }
+  const isArray = (Array == null ? void 0 : Array.isArray(elems)) || ((_a = NodeList == null ? void 0 : NodeList.prototype) == null ? void 0 : _a.isPrototypeOf(elems)) || ((_b = HTMLCollection == null ? void 0 : HTMLCollection.prototype) == null ? void 0 : _b.isPrototypeOf(elems));
+  (isArray ? Array.from(elems) : [elems]).forEach(
+    (elem) => {
+      if (typeof elem === "string") {
+        Array.from(document.querySelectorAll(elem)).forEach((el) => {
+          if (el == null ? void 0 : el.classList) {
+            el.classList.add(hideClass);
+            el.classList.add(printingClass);
+            if (isNone) {
+              el.classList.add(hideNoneClass);
+            }
+          }
+        });
+      } else if (elem == null ? void 0 : elem.classList) {
+        elem.classList.add(hideClass);
+        elem.classList.add(printingClass);
+        if (isNone) {
+          elem.classList.add(hideNoneClass);
+        }
+      }
+    }
+  );
+}
+function showElem(elems) {
+  var _a, _b;
+  Array.from(document.getElementsByClassName(hideClass)).forEach((elem) => {
+    if (elem == null ? void 0 : elem.classList) {
+      elem.classList.remove(printingClass);
+    }
+  });
+  if (!elems) {
+    return;
+  }
+  const isArray = (Array == null ? void 0 : Array.isArray(elems)) || ((_a = NodeList == null ? void 0 : NodeList.prototype) == null ? void 0 : _a.isPrototypeOf(elems)) || ((_b = HTMLCollection == null ? void 0 : HTMLCollection.prototype) == null ? void 0 : _b.isPrototypeOf(elems));
+  (isArray ? Array.from(elems) : [elems]).forEach(
+    (elem) => {
+      if (typeof elem === "string") {
+        Array.prototype.forEach.call(document.querySelectorAll(elem), (el) => {
+          if (el == null ? void 0 : el.classList) {
+            el.classList.remove(hideClass);
+            el.classList.remove(printingClass);
+            el.classList.remove(hideNoneClass);
+          }
+        });
+      } else if (elem == null ? void 0 : elem.classList) {
+        elem.classList.remove(hideClass);
+        elem.classList.remove(printingClass);
+        elem.classList.remove(hideNoneClass);
+      }
+    }
+  );
+}
+function showLoading() {
+  addCommonCss();
+  let elem = document.getElementById(loadingId);
+  if (!elem) {
+    elem = document.createElement("div");
+    elem.id = loadingId;
+    document.body.appendChild(elem);
+  }
+  elem.style.display = "block";
+  window["hideElePrinterLoading"] = () => {
+    hideLoading();
+  };
+  return elem;
+}
+function hideLoading() {
+  const elem = document.getElementById(loadingId);
+  if (elem) {
+    elem.style.display = "none";
+  }
+}
+function printThis(option = {}) {
+  var _a;
+  window.focus();
+  addCommonCss();
+  const optElem = document.getElementById(printOptionId);
+  if (optElem && optElem.parentNode) {
+    optElem.parentNode.removeChild(optElem);
+  }
+  const optStr = [];
+  if (typeof option.horizontal === "boolean") {
+    optStr.push(`size: ${option.horizontal ? "landscape" : "portrait"};`);
+  }
+  if (option.margin != null) {
+    optStr.push(`margin: ${option.margin};`);
+  }
+  if (optStr) {
+    const elem = document.createElement("style");
+    elem.id = printOptionId;
+    elem.setAttribute("type", "text/css");
+    elem.setAttribute("media", "print");
+    elem.innerHTML = `@page { ${optStr.join("")} }`;
+    document.body.appendChild(elem);
+  }
+  hideElem(option.hide, option.isHideNone);
+  const oldTitle = document.title;
+  if (option.title) {
+    document.title = option.title;
+  }
+  let pWin;
+  if (!option.blank) {
+    pWin = window;
+    pWin.print();
+  } else {
+    pWin = window.open("", "_blank");
+    if (pWin) {
+      pWin.focus();
+      const pDoc = pWin.document;
+      if (pDoc) {
+        pDoc.open();
+        let html = "<!DOCTYPE html>" + ((_a = document.getElementsByTagName("html")[0]) == null ? void 0 : _a.outerHTML);
+        html = html.replace(/<script/g, '<div style="display:none;" ').replace(/<\/script>/g, "</div>");
+        const addHtml = function(str) {
+          html = html.replace(/<\/html>/, `${str}</html>`);
+        };
+        addHtml(`
+         <script>
+           window.onload = function() {
+             window.print();
+             ${option.close !== false ? "window.close();" : ""}
+           }
+         <\/script>
+         `);
+        pDoc.write(html);
+        pDoc.close();
+      }
+    }
+  }
+  if (option.title) {
+    document.title = oldTitle;
+  }
+  showElem(option.hide);
+  return pWin;
+}
+function printHtml(option) {
+  if (option.loading !== false && option.blank !== true) {
+    showLoading();
+  }
+  let pWin, pDoc;
+  if (option.blank) {
+    pWin = window.open("", "_blank");
+    pDoc = pWin == null ? void 0 : pWin.document;
+  } else {
+    const pFrame = getPrintFrame();
+    pWin = pFrame.contentWindow;
+    pDoc = pFrame.contentDocument || (pWin == null ? void 0 : pWin.document);
+  }
+  if (pWin) {
+    pWin.focus();
+    if (pDoc && option.html) {
+      pDoc.open();
+      pDoc.write(`
+       <!DOCTYPE html>
+       <head>
+         <meta charset="UTF-8"/>
+         <title>${option.title ?? ""}</title>
+         <style>
+           ${getCommonCss(true)}
+         </style>
+         ${option.style ?? ""}
+       </head>
+       <html>
+       <body>
+         ${addHeaderFooter(option.html, option.header, option.footer)}
+         ${getOptionHtml(option)}
+       </body>
+       </html>
+     `);
+      pDoc.close();
+    }
+  }
+  return pWin;
+}
+function printPage(option) {
+  var _a;
+  if (option.loading !== false && option.blank !== true) {
+    showLoading();
+  }
+  let pWin, pDoc;
+  if (option.blank) {
+    pWin = window.open("", "_blank");
+    pDoc = pWin == null ? void 0 : pWin.document;
+  } else {
+    const pFrame = getPrintFrame();
+    pWin = pFrame.contentWindow;
+    pDoc = pFrame.contentDocument || (pWin == null ? void 0 : pWin.document);
+  }
+  if (pWin && pDoc) {
+    pWin.focus();
+    const content = ((_a = option.pages) == null ? void 0 : _a.map((h) => `<div class="ele-printer-page-item">${h}</div>`).join("")) ?? "";
+    const pageClass = "ele-printer-page" + (option.isDebug ? " ele-printer-debug" : "");
+    const contentHtml = `<div class="${pageClass}">${content}</div>`;
+    pDoc.open();
+    pDoc.write(`
+     <!DOCTYPE html>
+     <html>
+       <head>
+         <meta charset="UTF-8"/>
+         <title>${option.title ?? ""}</title>
+         ${getPageStyleHtml(option.padding, option.width, option.height)}
+         ${option.style ?? ""}
+       </head>
+       <body>
+       ${addHeaderFooter(contentHtml, option.header, option.footer)}
+       ${getOptionHtml(option)}
+       </body>
+     </html>
+   `);
+    pDoc.close();
+  }
+  return pWin;
+}
+function printPdf(option) {
+  if (option.loading !== false) {
+    showLoading();
+  }
+  const pFrame = getPrintFrame();
+  const pWin = pFrame.contentWindow;
+  pFrame.onload = () => {
+    if (!pFrame.getAttribute("src")) {
+      return;
+    }
+    pFrame.focus();
+    option.before && option.before();
+    pWin == null ? void 0 : pWin.print();
+    hideLoading();
+    option.done && option.done();
+  };
+  function doPrint(arraybuffer) {
+    const localPdf = new window.Blob([arraybuffer], {
+      type: "application/pdf"
+    });
+    pFrame.setAttribute("src", window.URL.createObjectURL(localPdf));
+  }
+  if (option.arraybuffer) {
+    doPrint(option.arraybuffer);
+  } else if (option.url) {
+    const req = new window.XMLHttpRequest();
+    req.open("GET", option.url, true);
+    req.responseType = "arraybuffer";
+    req.onload = () => {
+      if ([200, 201].indexOf(req.status) === -1) {
+        return option.error && option.error(req.status, req.statusText);
+      }
+      doPrint(req.response);
+    };
+    req.send();
+  }
+  return pWin;
+}
+function makeTable(data, cols) {
+  cols.forEach((col) => {
+    col.forEach((c) => {
+      c.INIT_OK = void 0;
+      c.key = void 0;
+      c.colGroup = void 0;
+      c.HAS_PARENT = void 0;
+      c.parentKey = void 0;
+      c.PARENT_COL_INDEX = void 0;
+    });
+  });
+  const colArrays = [];
+  let colIndex = 0;
+  for (let i1 = 0; i1 < cols.length; i1++) {
+    const item1 = cols[i1];
+    for (let i2 = 0; i2 < item1.length; i2++) {
+      const item2 = item1[i2];
+      if (!item2) {
+        item1.splice(i2, 1);
+        continue;
+      }
+      item2.key = i1 + "-" + i2;
+      let CHILD_COLS = void 0;
+      if (item2.colGroup || item2.colspan && item2.colspan > 1) {
+        item2.colGroup = true;
+        CHILD_COLS = [];
+        colIndex++;
+        let childIndex = 0;
+        for (let i22 = 0; i22 < cols[i1 + 1].length; i22++) {
+          const item22 = { ...cols[i1 + 1][i22] };
+          if (item22.HAS_PARENT || childIndex > 1 && childIndex == item2.colspan) {
+            cols[i1 + 1][i22] = item22;
+            continue;
+          }
+          item22.HAS_PARENT = true;
+          item22.parentKey = i1 + "-" + i2;
+          item22.key = i1 + 1 + "-" + i22;
+          item22.PARENT_COL_INDEX = colIndex;
+          CHILD_COLS.push(item22);
+          childIndex = childIndex + Number(item22.colspan && item22.colspan > 1 ? item22.colspan : 1);
+          cols[i1 + 1][i22] = item22;
+        }
+      }
+      item2.CHILD_COLS = CHILD_COLS;
+      if (!item2.PARENT_COL_INDEX) {
+        colArrays.push(item2);
+      }
+      cols[i1][i2] = item2;
+    }
+  }
+  const eachCols = function(callback, arr) {
+    if (!arr) {
+      arr = colArrays;
+    }
+    for (let i = 0; i < arr.length; i++) {
+      const item = arr[i];
+      callback && callback(i, item);
+      if (item.CHILD_COLS) {
+        eachCols(callback, item.CHILD_COLS);
+      }
+    }
+  };
+  let maxWidth = 1;
+  let needSetWidth = true;
+  const colgroupHtml = [];
+  eachCols((_i, c) => {
+    if (!c.colGroup) {
+      colgroupHtml.push("<col");
+      if (c.width) {
+        colgroupHtml.push(` width="${c.width}"`);
+      }
+      colgroupHtml.push("/>");
+      if (c.width && !/\d+%$/.test(String(c.width))) {
+        maxWidth += c.width + 1;
+      } else {
+        needSetWidth = false;
+      }
+    }
+  });
+  const thHtml = cols.map((cs) => {
+    const th = cs.map((c) => {
+      return `<th
+                   colspan="${c.colspan || 1}"
+                   rowspan="${c.rowspan || 1}"
+                   align="${c.thAlign || c.align || "left"}"
+                   style="${c.thStyle}">${c.title || ""}
+                 </th>`;
+    }).join("");
+    return "<tr>" + th + "</tr>";
+  }).join("");
+  const headHtml = "<thead>" + thHtml + "</thead>";
+  const trHtml = data.map((d, index) => {
+    const tr = ["<tr>"];
+    let colIndex2 = 0;
+    eachCols((_i, c) => {
+      if (!c.colGroup) {
+        const value = c.field ? d[c.field] : "";
+        const content = c.templet ? c.templet(d, index, colIndex2) : value;
+        const align = c.align || "left";
+        tr.push(`<td align="${align}" style="${c.style}">${content}</td>`);
+        colIndex2++;
+      }
+    });
+    tr.push("</tr>");
+    return tr.join("");
+  }).join("");
+  const bodyHtml = "<tbody>" + trHtml + "</tbody>";
+  return `<table
+           style="width: ${needSetWidth ? maxWidth + "px" : "100%"};"
+           class="ele-printer-table">
+           <colgroup>${colgroupHtml.join("")}</colgroup>
+           ${headHtml} ${bodyHtml}
+         </table>`;
+}
+function printElement(elem, option) {
+  if (!elem) {
+    return null;
+  }
+  const bodyChilds = Array.prototype.filter.call(
+    document.body.children,
+    (el) => {
+      if (typeof (el == null ? void 0 : el.tagName) === "string" && ["style", "script", "link"].includes(el.tagName.toLowerCase())) {
+        return false;
+      }
+      return true;
+    }
+  );
+  hideElem(bodyChilds, true);
+  const parntEl = elem.parentNode;
+  const nextEl = elem.nextElementSibling;
+  document.body.append(elem);
+  const pWin = printThis(option);
+  if (nextEl) {
+    parntEl == null ? void 0 : parntEl.insertBefore(elem, nextEl);
+  } else {
+    parntEl == null ? void 0 : parntEl.append(elem);
+  }
+  showElem(bodyChilds);
+  return pWin;
+}
+export {
+  makeTable,
+  printElement,
+  printHtml,
+  printPage,
+  printPdf,
+  printThis
+};