html 打印相关操作与实现详解

德德锅08

原理为调用 window.print() 方法，但是该方法只能对当前页面全部打印，所以有了以下方案来解决局部打印
1: 利用 iframe 将需要打印的元素和样式注入 再调用打印

1. // 示例代码
   
2. function print () {
   
3.     let ifElement = document.getElementById('ifId')
   
4.     const addHtmlPrint = () => {
   
5.         const content = ifElement.contentWindow || ifElement.contentDocument
   
6.         content.document.body.innerHTML = this.detailTable
   
7.         const styleEle = document.createElement('style')
   
8.         /* 去掉打印时的页头和页脚 */
   
9.         styleEle.innerHTML = '@media print {@page { margin: 5mm; }}'
   
10.         content.document.getElementsByTagName('head')[0].appendChild(styleEle)
    
11. 
    
12.         /* 保障 iframe 中资源加载完成，图片要用 img 形式引入 */
    
13.         ifElement.onload = () => {
    
14.             content.print()
    
15.         }
    
16.     }
    
17.     this.getDetailTable()
    
18. 
    
19.     if (ifElement) {
    
20.         // 若已经创建，则直接打印
    
21.         addHtmlPrint()
    
22.     } else {
    
23.         ifElement = document.createElement('iframe')
    
24.         ifElement.setAttribute('id', 'ifId')
    
25.         ifElement.setAttribute('style', 'display:none')
    
26.         document.body.appendChild(ifElement)
    
27. 
    
28.         addHtmlPrint()
    
29.     }
    
30. }

复制代码

2: 利用 @media print，在当前页面设置打印操作时需要隐藏的元素

1. @media print{
   
2.     /* 这里将不需要打印的元素设置为不显示 */
   
3.     .hidden-element{
   
4.         display:none;
   
5.         /* visibility:hidden; */
   
6.     }
   
7.     /*纸张设置为宽1200px 高800px*/
   
8.     @page{
   
9.         size:1200px 800px;
   
10.     }
    
11. }

复制代码

   

• <link href="/example.css" media="print" rel="stylesheet" /> 标注打印时才会采用的样式   
  
• 监听打印事件 window.addEventListener('beforeprint|| afterprint', ()=> {});
  

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

深情铁蛋

666666666666

别送我2333

确实牛逼

槑槑时光

让我们一起努力

56751212

同意！

508391338

好用好用

zzf123466

牛逼

南小鸟

我想了解更多

2006554111

说得太好了，完全同意！

大原

同意！