前端怎么实现分页的？js和css

心已赠人 2022-11-21 03:55 203阅读 0赞

## 怎么触发打印（导出为PDF）的弹框？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70_pic_center]

//在function中
     window.print();

> 不能对绝对定位的元素使用三种分页属性：  
> page-break-inside（用于设置是否在指定元素中插入分页符）、  
> page-break-after（指定元素后添加分页符）、  
> page-break-before（指定元素前添加分页符）  
> 请尽可能少地使用分页属性，并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。

## 定义样式的方式 ##

方式一：

方式二：  
在外部的css文件中定义，和其他页面css写在一起

@media print { 
        #app { 
            display: block;
            position: unset;
        }
        .percent-100 { 
            width: auto;
            height: auto;
        }
        .flex-column { 
            display: block;
        }
        .exports-operate-tit { 
            display: none;
        }
        .export-box { 
            page-break-after: always;
        }
    }

方式三：

## 设置打印布局（横向、纵向、边距） ##

@media print { 
        @page { 
          /* 纵向 */
          size: portrait; 
     
          /* 横向 */
          size: landscape;
     
          /* 边距 上右下左 */
          margin: 1cm 2cm 1cm 2cm;
        }
      }

## 去除浏览器默认页眉页脚 ##

@media print { 
      @page { 
        margin: 0;
      }
      body { 
        margin: 1cm;
      }
    }

值得一提的是：有时候在页面上我们写了背景颜色或者字体颜色等，但是这些样式在打印过程中被忽略了。那么遇到这情况应该怎么解决？目前我亲测有效的是下面的代码，

-webkit-print-color-adjust:exact;
    -moz-print-color-adjust:exact;
    -ms-print-color-adjust:exact;
    print-color-adjust:exact;

> color-adjust: economy; -------------默认值，以最经济节省的方式，也许看不到彩色颜色 color-adjust:  
> exact; ------------- - 让浏览器遵从开发者的意愿显示颜色

print-color-adjust color-adjust这个CSS属性作用用一句话表述：**是否允许浏览器自己调节颜色以便有更好的阅读体验。**

更多知识可参考：  
1、[window.print() 前端实现网页打印详解][window.print_]  
2、[解决调用window.print时，因页面较长自动分成两页后只有第一页有背景图，第二页没有背景图，以及-webkit-print-color-adjust: exact失效的问题][window.print_-webkit-print-color-adjust_ exact]  
3、[记录调用window.print时因处理页眉页脚问题导致自动分页后打印不全的解决方法][window.print]  
4、[5分钟快速了解下CSS4 color-adjust属性][5_CSS4 color-adjust]  
5、[css 写打印样式问题][css]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/7d114bb1571b471d95096bc4943df789.png
[window.print_]: https://blog.csdn.net/qq_38128179/article/details/103344021
[window.print_-webkit-print-color-adjust_ exact]: https://blog.csdn.net/qq_36523214/article/details/107083071
[window.print]: https://blog.csdn.net/qq_36523214/article/details/107339129?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param
[5_CSS4 color-adjust]: https://www.php.cn/css-tutorial-413384.html
[css]: https://www.cnblogs.com/elaine-mz/p/9004198.html