sohelp-ele/lib/utils/printer.js

SohelpEle Library

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const ieWebBrowser = '<object id="WebBrowser" classid="clsid:8856F961-340A-11D0-A96B-00C04FD705A2" width="0" height="0"></object>';
const printFrameId = "ele-printer-frame";
const printStyleId = "ele-printer-style";
const printOptionId = "ele-printer-set";
const loadingElId = "ele-printer-loading";
const printingClass = "ele-printer-printing";
const hideClass = "ele-printer-hide";
const hideNoneClass = "ele-printer-hide-none";
function uuid(length = 8) {
  const num = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";
  let str = "p_";
  for (let i = 0; i < length; i++) {
    str += num.charAt(Math.floor(Math.random() * num.length));
  }
  return str;
}
function isIE() {
  return !!window["ActiveXObject"] || "ActiveXObject" in window;
}
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;
      }

      ::-webkit-scrollbar {
        width: 0 !important;
        height: 0!important;
      }

      .el-scrollbar__wrap {
        margin: 0 !important;
      }
    }

    /* \u6253\u5370\u65F6\u4E0D\u663E\u793A\u7684\u5143\u7D20 */
    .${hideClass}.${printingClass} {
      visibility: hidden !important;
    }
    .${hideClass} {
      ${isPrinting ? "visibility: hidden !important;" : ""}
    }
    .${hideClass}.${printingClass}.${hideNoneClass},
    .${hideClass}.${hideNoneClass}${isPrinting ? "" : "-no"} {
      display: none !important;
    }

    /* \u8868\u683C\u6837\u5F0F */
    .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\u6837\u5F0F */
    #${loadingElId} {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: hsla(0, 0%, 100%, .9);
      z-index: 19000000;
    }
    #${loadingElId}: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);
      }
    }

    /* \u5E26\u9875\u7709\u9875\u811A\u9875\u9762\u6837\u5F0F */
    .ele-printer-table-page {
      width: 100%;
      border-collapse: collapse;
      border: none;
    }
    .ele-printer-table-page td {
      padding: 0;
      border: none;
    }
  `;
}
function getPageStyleHtml(padding, width, height) {
  return `
    <style>
      body {
        margin: 0 !important;
      }

      /* \u81EA\u5B9A\u4E49\u8FB9\u8DDD\u53CA\u5BBD\u9AD8\u6837\u5F0F */
      .ele-printer-page .ele-printer-page-item {
        width: ${width != null ? width : "auto"};
        height: ${height != null ? height : "auto"};
        padding: ${padding != null ? padding : "0"};
        page-break-after: always !important;
        box-sizing: border-box !important;
        border: none !important;
        position: relative;
      }

      /* \u8C03\u8BD5\u6A21\u5F0F\u6837\u5F0F */
      .ele-printer-page.ele-printer-debug .ele-printer-page-item {
        border: 1px solid red !important;
      }

      /* \u5168\u5C40\u6837\u5F0F */
      ${getCommonCss(true)}
    </style>
  `;
}
function getOptionHtml(option) {
  const { beforeJs, doneJs } = addCallback(option.before, option.done);
  const blank = option.blank || option.iePreview !== false && isIE();
  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 (typeof option.margin !== "undefined" && option.margin != null) {
    optHtml.push(`margin: ${option.margin};`);
  }
  optHtml.push(`}`);
  optHtml.push(`</style>`);
  if (option.iePreview !== false && isIE()) {
    optHtml.push(ieWebBrowser);
    if (option.print !== false) {
      optHtml.push(`
        <script>
          window.onload = function() {
            ${beforeJs}
            try {
              window.WebBrowser.ExecWB(7, 1);
            } catch(e) {
              console.error(e);
              window.print();
            }
            ${hideLoadJs}
            ${doneJs}
            ${closeJs}
          }
        <\/script>
      `);
    }
  } else 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 != null ? html : "";
  }
  let result = '<table class="ele-printer-table-page">';
  if (header) {
    result += `<thead><tr><td>${header}</td></tr></thead>`;
  }
  result += `<tbody><tr><td>${html != null ? 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();
  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.prototype.forEach.call(
    document.getElementsByClassName(hideClass),
    (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));
  Array.prototype.forEach.call(isArray ? elems : [elems], (elem) => {
    if (typeof elem === "string") {
      Array.prototype.forEach.call(document.querySelectorAll(elem), (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.prototype.forEach.call(
    document.getElementsByClassName(hideClass),
    (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));
  Array.prototype.forEach.call(isArray ? elems : [elems], (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 showPrintLoading() {
  addCommonCss();
  let elem = document.getElementById(loadingElId);
  if (!elem) {
    elem = document.createElement("div");
    elem.id = loadingElId;
    document.body.appendChild(elem);
  }
  elem.style.display = "block";
  window["hideElePrinterLoading"] = () => {
    hidePrintLoading();
  };
  return elem;
}
function hidePrintLoading() {
  const elem = document.getElementById(loadingElId);
  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 (typeof option.margin !== "undefined" && 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;
    if (option.iePreview !== false && isIE()) {
      if (!document.getElementById("WebBrowser")) {
        const elem = document.createElement("object");
        elem.id = "WebBrowser";
        elem.setAttribute(
          "classid",
          "clsid:8856F961-340A-11D0-A96B-00C04FD705A2"
        );
        elem.style.display = "none";
        document.body.appendChild(elem);
      }
      try {
        window["WebBrowser"].ExecWB(7, 1);
      } catch (e) {
        console.error(e);
        pWin.print();
      }
    } else {
      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>`);
        };
        if (option.iePreview !== false && isIE()) {
          if (!document.getElementById("WebBrowser")) {
            addHtml(ieWebBrowser);
          }
          addHtml(`
            <script>
              window.onload = function() {
                try {
                  window.WebBrowser.ExecWB(7,1);
                } catch(e) {
                  console.error(e);
                  window.print();
                }
                ${option.close !== false ? "window.close();" : ""}
              }
            <\/script>
          `);
        } else {
          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) {
  var _a, _b;
  if (option.loading !== false && option.blank !== true) {
    showPrintLoading();
  }
  let pWin, pDoc;
  if (option.blank || option.iePreview !== false && isIE()) {
    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>${(_a = option.title) != null ? _a : ""}</title>
          <style>
            ${getCommonCss(true)}
          </style>
          ${(_b = option.style) != null ? _b : ""}
        </head>
        <html>
        <body>
          ${addHeaderFooter(option.html, option.header, option.footer)}
          ${getOptionHtml(option)}
        </body>
        </html>
      `);
      pDoc.close();
    }
  }
  return pWin;
}
function printPage(option) {
  var _a, _b, _c, _d, _e;
  if (option.loading !== false && option.blank !== true) {
    showPrintLoading();
  }
  let pWin, pDoc;
  if (option.blank || option.iePreview !== false && isIE()) {
    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 = (_c = (_b = (_a = option.pages) != null ? _a : option.htmls) == null ? void 0 : _b.map((h) => `<div class="ele-printer-page-item">${h}</div>`).join("")) != null ? _c : "";
    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>${(_d = option.title) != null ? _d : ""}</title>
          ${getPageStyleHtml(option.padding, option.width, option.height)}
          ${(_e = option.style) != null ? _e : ""}
        </head>
        <body>
        ${addHeaderFooter(contentHtml, option.header, option.footer)}
        ${getOptionHtml(option)}
        </body>
      </html>
    `);
    pDoc.close();
  }
  return pWin;
}
function printPdf(option) {
  if (option.loading !== false) {
    showPrintLoading();
  }
  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();
    hidePrintLoading();
    option.done && option.done();
  };
  function doPrint(arraybuffer) {
    const localPdf = new window.Blob([arraybuffer], {
      type: "application/pdf"
    });
    if (window.navigator && window.navigator["msSaveOrOpenBlob"]) {
      window.navigator["msSaveOrOpenBlob"](localPdf, "print.pdf");
      hidePrintLoading();
    } else {
      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 = Object.assign({}, 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.appendChild(elem);
  const pWin = printThis(option);
  if (nextEl) {
    parntEl == null ? void 0 : parntEl.insertBefore(elem, nextEl);
  } else {
    parntEl == null ? void 0 : parntEl.appendChild(elem);
  }
  showElem(bodyChilds);
  return pWin;
}
exports.hidePrintLoading = hidePrintLoading;
exports.makeTable = makeTable;
exports.printElement = printElement;
exports.printHtml = printHtml;
exports.printPage = printPage;
exports.printPdf = printPdf;
exports.printThis = printThis;
exports.showPrintLoading = showPrintLoading;