js利用iframe 实现打印

/**
 *  类转行内样式
 * @param {Object} element 
 */
const classToStyle = element => {

  var eleArr = [element, ...element.querySelectorAll("*")];
  var eleClone = element.cloneNode(true);
  var eleCloneArr = [eleClone, ...eleClone.querySelectorAll("*")];
  for (let index = 0; index < eleArr.length; index++) {
    const element = eleArr[index];
    const elementClone = eleCloneArr[index];
    var style = window.getComputedStyle(element, null);
    for (var k in style) {
      if (isNaN(k) && k != "cssText" && k != "length") {
        if (
          style[k] == "0px" ||
          style[k] == "none" ||
          style[k] == "normal" ||
          style[k] == "auto" ||
          !style[k]
        ) {
          delete elementClone.style[k];
        } else {
          elementClone.style[k] = style[k];
        }
      }
    }
  }
  return eleClone;
};

/**
 * 打印指定元素的内容
 * @param {Object} element 打印元素
 */

const print = function(element) {
  const { document } = window;
  var iframe = document.createElement("IFRAME");

  const elementClone = classToStyle(element);

  iframe.frameborder = "0";
  iframe.style = "display: flex;left: -10000000px;";
  document.body.appendChild(iframe);

  const iframeWindow = iframe.contentWindow;
  const iframeDocument = iframe.contentWindow.document;

  iframeDocument.body.appendChild(elementClone);
  iframeWindow.print();
  iframe.remove();
};

你可能感兴趣的:(js利用iframe 实现打印)