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', 'position:absolute;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取不到节点：

1. 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', 'position:absolute;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);
};