详解window.print()，实现长列表打印分页

相信大家平时做项目时，打印需求很常见，但想把打印做好，还是要花点时间的。特别是长列表要分页的情况。

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

一、window的打印事件

默认情况下，调用 window.print() 会对整个 document.body 进行打印，当需要打印指定容器内容时，可以这样做：

1、先获取指定容器中的内容，将body的内容替换掉，调用了打印方法后，再把原来的body恢复。

     

        
这是第一个段落
     
     

        
这是第二个段落
     
  
  

  

2、监听打印前、后事件实现区域打印

window.onbeforeprint()、window.onafterprint()

  

    
这是一个段落
    
这是一个标题
  
  
  

  

二、打印样式

 我们页面的样式和打印页面时的样式是两个不同的样式，打印时会默认携带页面的样式，同时呢我们也可以修改页面打印时的样式。修改打印样式的方法：

1、使用内联media属性

2、使用媒体查询

3、引入打印样式表 

 例如：print.css

@media print {
    @page {
        size: auto;
        margin: 20px 30px;
    }
    #mainBody{
        margin-top:0 !important;
        margin-bottom:0 !important;
    }
}

 用link引入

注意：

1、如果是前后不分离的项目，在样式中用到`@`时可能会报错："上下文中未定义@media或@page"，这时候我们可以用``的方式引入。

2、修改打印样式时必须确保打印机样式实际上确实覆盖了主样式表。可以使用!important。

3、@page属性可以控制打印页面的边距大小和页眉页脚

@media print {
    @page {
        size: auto; // {size:A4}、{size: 800px 1200px}、{size:portrait}竖向打印、{size:landscape}横向打印

        margin: 20px 30px; // 边距，可去除页眉页脚
    }

    // 覆盖页面原有样式
    #container{
        margin-top:0 !important;
        margin-bottom:0 !important;
    }
}

4、-webkit-print-color-adjust：是一个在浏览器中强制打印背景颜色和字体颜色的css属性，当打印出来的某些元素的背景颜色没有被显示时，可以使用-webkit-print-color-adjust:exact

5、当需要自定义打印分页时机时，可通过如下方式将指定 DOM 设为分割点。

@media print {
  h1 {
    page-break-before: always; //在指定元素前面添加分页符
  }

  #title {
    page-break-after: always;//在指定元素后面添加分页符
  }
}

了解更多：page-break-after - CSS：层叠样式表 | MDN

 三、长列表打印

打印长列表时会要求自动分页，但添加了分页符效果可能并不理想。最常见的就是表格行被从中间截断，那要怎么解决呢？

其实我们只要控制打印的行数就可以了。我们需要知道打印元素的高度和表格行的高度，算出一页纸可以打印多少行，超出的部分放到下一页打印。（一页放多少行没必要计算，根据打印元素的高度估算下就可以了。）

示例：

代码解释：

1、首先给打印元素设置宽和高，高度根据需要或实际情况设置。（可根据A4纸大小来定）

2、通过接口拿到长列表数据，然后用`groupArray`方法计算需要打印几页。（groupArray函数返回一个二维数据，二维数组的长度就是页数，二维数组的每一项就是每页的数据）

3、根据这个二维数组循环创建要打印的元素。（类`.printContainer`是要打印的整体内容，即一页纸的内容，arr[i]就是每页的表格数据）

4、示例中每页都加了标题和签名，表格有合并单元格。

5、简单表格如下：

        ${arr[i].map(item=>{
            return ``
            }).join("")
        }
     

    

        

            
检测日期
            
检测值
            
操作护士
         
    
                                            
    

                        
${item.MeasureDateStr}
                        
${item.value}
                        
${item.AccountName}