Js 實現局部打印功能

1.當前頁面

    var bodyHtml = window.document.body.innerHTML;
    window.document.body.innerHTML = printHtml;//printHtml為當前需要打印的div的內容
    window.print();
    window.document.body.innerHTML = bodyHtml;
    
    缺點： （1）移除頁面內容再插入需要打印頁面內容，頁面會有一個大的跳動
    （2）頁面事件效果會丟失

2.iframe 打印

	   function myPrint(){
		var el = "<div>Content should be print!</div>";
		var iframe = document.createElement('IFRAME');
		iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
		document.body.appendChild(iframe);
		var doc = iframe.contentWindow.document;
		doc.write(el);
		var pageStyle="html,body{height:100%}img{max-width:100%;max-height:100%;margin:0 auto}";
		var style=document.createElement("style");
		style.innerText= pageStyle;
		doc.getElementsByTagName("head")[0].appendChild(style)
		doc.close();
		iframe.contentWindow.focus();
		iframe.contentWindow.print();

)

缺點： 需要將所有style拷貝到iframe

3.media query 實現

	   @media print {
	  .no-need-print-block
	  {
	    display: none;
	  } 
	}

缺點： 一塊多個地方復用的模塊不好customize

4.reactComponent:

		import React, { PureComponent } from 'react';
		import { string } from 'prop-types';
		
		export default class Print extends PureComponent {
		  static propTypes = {
		    printHtml: string,
		  };
		
		  static defaultProps = {
		    printHtml: 'test html',
		  }
		
		  setPageStyles = (iDom) => {
		    const styles = document.getElementsByTagName('style');
		    const IHead = iDom.getElementsByTagName('head')[0];
		    let pageStyle = '';
		    Array.from(styles).map((s) => {
		      pageStyle += s.innerHTML;
		    });
		    const style = document.createElement('style');
		    style.innerHTML = pageStyle;
		    IHead.appendChild(style);
		  }
		
		  handlePrint = () => {
		    const { printHtml } = this.props;
		    const iFrame = this.iframe;
		    const iFrameWindow = iFrame.contentWindow;
		    const iDom = iFrameWindow.document;
		    iDom.write(printHtml);
		    this.setPageStyles(iDom);
		    iDom.close();
		    iFrameWindow.print();
		  }
		
		  render() {
		    return (
		      <div>
		        <button style={{ backgroundColor: 'yellow', cursor: 'pointer' }} onClick={this.handlePrint}>print button</button>
		        <iframe title="print iframe" style={{ position: 'absolute', width: '0', height: '0', left: '-500px', top: '-500px' }} ref={(iframe) => { this.iframe = iframe; }}/>
		      </div>
		    );
		  }
}

缺點： 需要將所有style拷貝到iframe
打印方法兼容性解決方法:

   if (document.queryCommandSupported('print')) {
      document.execCommand('print', false, null);
    } else {
      window.print();
    }

firefox 只打印一頁問題解決： firefox 打印display: flex; display: inline-block; 改display：block；去掉float：left／right；

在desktop顯示正常，但是在移動端顯示變為小圓圈，無法正確展示選中取消選中效果問題解決方案：

	display: block;
      width: 58px;
      height: 20px;
      -webkit-appearance: checkbox;
      -moz-appearance:  checkbox;