原生 js 打印dom的 封装

// 设置打印样式
function getStyle() {
  const styleContent = `#print-container {
    display: none;
}
@media print {
    body > :not(.print-container) {
        display: none;
    }
    html,
    body {
        display: block !important;
    }
    #print-container {
        display: block;
    }
}`;
  const style = document.createElement('style');
  style.innerHTML = styleContent;
  return style;
}

// 清空打印内容
function cleanPrint() {
  const div = document.getElementById('print-container');
  if (div) {
    document.querySelector('body').removeChild(div);
  }
}

// 新建DOM，将需要打印的内容填充到DOM
function getContainer(html) {
  console.log(377777, html);

  const tableWidth = 'auto';

  cleanPrint();
  const container = document.createElement('div');
  container.setAttribute('id', 'print-container');

  const vxeTableHeader = html.getElementsByClassName('vxe-table--header');
  if (vxeTableHeader.length > 0) {
    for (let i = 0; i < vxeTableHeader.length; i += 1) {
      vxeTableHeader[i].style.width = tableWidth;
    }
  }
  const vxeTableBody = html.getElementsByClassName('vxe-table--body');

  if (vxeTableBody.length > 0) {
    for (let i = 0; i < vxeTableBody.length; i += 1) {
      vxeTableBody[i].style.width = tableWidth;
    }
  }
  const vxeTableFooter = html.getElementsByClassName('vxe-table--footer');

  if (vxeTableFooter.length > 0) {
    for (let i = 0; i < vxeTableFooter.length; i += 1) {
      vxeTableFooter[i].style.width = tableWidth;
    }
  }

  // container.innerHTML = html;
  container.appendChild(html);
  return container;
}

// 图片完全加载后再调用打印方法
function getLoadPromise(dom) {
  let imgs = dom.querySelectorAll('img');
  imgs = [].slice.call(imgs);

  if (imgs.length === 0) {
    return Promise.resolve();
  }

  let finishedCount = 0;
  return new Promise((resolve) => {
    function check() {
      finishedCount += 1;
      if (finishedCount === imgs.length) {
        resolve();
      }
    }
    imgs.forEach((img) => {
      img.addEventListener('load', check);
      img.addEventListener('error', check);
    });
  });
}

export default function printHtml(html) {
  const style = getStyle();
  const container = getContainer(html);
  document.body.appendChild(style);
  document.body.appendChild(container);
  getLoadPromise(container).then(() => {
    window.print();
    document.body.removeChild(style);
    document.body.removeChild(container);
  });
}