一文弄懂window.print 打印

• 前言
• • window.print() 默认效果缺陷
  • 一、打印样式
  • 二、打印指定区域内容
  • • 1. 对容器进行打印
    • 2. 对容器内的部分内容进行打印
    • 3. 监听打印前后事件
    • 4. iframe
    • 三、强行插入分页
    • 四、打印设置
    • 五、最佳实践（React）
    • • 1. 背景：
      • 2. 思路：
      • 3. 实现：
      • 六、如果干预打印分页
      • 七、 window.print去除浏览器默认页眉页脚
      • • window.print() 实现A4纸张打印及去掉页眉页脚及打印链接
        • window.print() 去掉页眉页脚及打印链接
        • 八 、IE浏览器打印预览 ：使用html 标签引入Webbrowser控件

          

          
          （图片来源网络，侵删）

          https://developer.mozilla.org/en-US/docs/Web/API/Window/print

          前言

          一般信息填写类的需求页面，都会增设「预览」和「打印」功能。我们会通过编写 DOM 及样式来绘制出预览视图，而打印则是基于预览来生成 PDF 文件。

          浏览器原生 API window.print() 可以用于打印当前窗口（window.document）视图内容。调用此方法会产生一个打印预览弹框，用户可以根据具体设置来得到打印结果。

          window.print() 默认效果缺陷

          1.打印控件默认没给分页，就只显示了一页

          2.dom 布局和样式很容易发生错位、丢失

          3.我想要局部打印，但默认是获取的整个 body.innerHtml 的内容

          
          （图片来源网络，侵删）

          一、打印样式

          默认情况下，基于页面上的内容，会将元素，布局和样式都进行打印；

          如果仅想在打印上设置特殊样式，可以通过以下方式：

          1.使用打印样式表：

          2.使用媒介查询：

          @media print {p{color: lavender;background: #ccc;}h1{color: lightblue;background: #ccc;}
          } 
          

          3.使用内联 media 属性

           p{color: lavender;background: #ccc;}h1{color: lightblue;background: #ccc;}  
          

          默认情况下，元素的背景色不会被打印，可通过设置属性来支持：

          
          （图片来源网络，侵删）

          div{// Chrome、Safari 等 webkit 浏览器内核-webkit-print-color-adjust: exact;// 火狐print-color-adjust: exact;color-adjust: exact;
          } 
          

          二、打印指定区域内容

          默认情况下，调用 window.print() 会对整个 document.body 进行打印，当需要打印指定容器内容时，可以通过以下几种方式：

          1. 对容器进行打印

          这是一个段落
          这是一个标题
           
          	const printpage = () => {
          		let newstr = document.getElementById("container").innerHTML;
          		let oldstr = document.body.innerHTML;
          		document.body.innerHTML = newstr;
          		window.print();
          		document.body.innerHTML = oldstr;
          	} 
          
           
          

          2. 对容器内的部分内容进行打印

          当只需要打印容器内某一部分内容时，可以通过注释标识进行截取。
          这是一个段落
          这是一个标题
           const printpage = () => {let oldStr = window.document.body.innerHTML; // 获取body的内容let start = ""; // 开始打印标识, 17个字符let end = ""; // 结束打印标识let newStr = oldStr.substr(oldStr.indexOf(start) + 17); // 截取开始打印标识之后的内容newStr = newStr.substring(0, newStr.indexOf(end)); // 截取开始打印标识和结束打印标识之间的内容window.document.body.innerHTML = newStr; // 把需要打印的指定内容赋给bodywindow.print(); // 调用浏览器的打印功能打印指定区域window.document.body.innerHTML = oldStr; // body替换为原来的内容} 
           
          

          3. 监听打印前后事件

          通过监听打印前后事件window.onbeforeprint、window.onafterprint ，对不需要进行打印的元素进行隐藏和放开隐藏。

          
          这是一个段落
          这是一个标题
          
          
          
          const printpage = () => {window.print();}
          window.onbeforeprint = function() {
          // 将一些不需要被打印的元素隐藏
          document.getElementById('title').style.display = 'none';}
          window.onafterprint = function() {
          // 放开隐藏的元素
          document.getElementById('title').style.display = 'block';
          } 
          
           
          

          4. iframe

          上面几种方式都在当前窗口进行打印，并且都需要更改 document.body 内容，这会出现视图切换，带来的体验不是太好。

          下面我们借助 iframe 来实现打印，并且不影响当前视窗的内容展示。

          	
          
          		
          这是一个段落
          		
          这是一个标题
          	
          	
          	
          		const printpage = () => {
          			const printContent = document.querySelector('#container').innerHTML;
          			const iframe = document.createElement('iframe');
          			iframe.setAttribute('style', 'position: absolute; width: 0; height: 0;');document.body.appendChild(iframe);
          			const iframeDoc = iframe.contentWindow.document;
          			// 设置打印展示方式 - 横向展示
          			iframeDoc.write('@page {size: landscape;}');
          			// 向 iframe 中注入 printContent 样式
          			iframeDoc.write(`