iframe实现局部打印图片不显示,打印预览样式错乱等问题

注意:

1、推荐使用内联样式,或iframe中创建样式表
2、宽度使用px而不用%,打印发现被放缩时检查样式,控制好宽度去排查都会得到解决
3、尽量使用es5语法,防止低版本浏览器不兼容
4、图片使用base64,防止图片资源还在加载中但是已经执行了打印(onload方法可解决图片不显示问题,但是低版本浏览器可能不执行onload)

需要打印的dom外层无iframe嵌套:

//id为打印的节点
const printDomContentByIframe = id => {
  const el = document.getElementById('id');
  const iframe = document.createElement('iframe');
  let doc = null;
  iframe.id = 'printIframe';
  iframe.setAttribute('style', 'width:0px;height:0px;left:500px;top:500px;');
  document.body.appendChild(iframe);
  doc = iframe.contentWindow.document;
  //注意这里取的是innerHTML,ref赋予对象别弄错
  doc.write(el.innerHTML);
  doc.close();
  // 获取iframe的焦点,从iframe开始打印
  iframe.contentWindow.focus();
  iframe.contentWindow.print();
  //打印完毕后移除iframe很重要
  iframe.parentNode.removeChild(iframe);

需要打印的dom外层有iframe嵌套, 此时document.getElementById取不到节点:

  • src同域
  • //contentWindow 所有浏览器都支持,包括旧版本的IE
    document.getElementById('myframe').contentWindow.document.getElementById('x')
    

    2.src不同域

    //el为dom实例,使用ref直接传入dom实例
    const printDomContentByIframe = el => {
      const iframe = document.createElement('iframe');
      let doc = null;
      iframe.id = 'printIframe';
      iframe.setAttribute('style', 'width:0px;height:0px;left:500px;top:500px;');
      document.body.appendChild(iframe);
      doc = iframe.contentWindow.document;
      //注意这里取的是innerHTML,ref赋予对象别弄错
      doc.write(el.innerHTML);
      doc.close();
      // 获取iframe的焦点,从iframe开始打印
      iframe.contentWindow.focus();
      iframe.contentWindow.print();