网页打印实践及参考资料推荐

难度系数:简单
关键词:css print

实践

处理前截图:
图片描述
处理后截图:
图片描述

实践小结

第一次接到网页要提供打印,可能会有些不知所措,我这里只说下遇到表格、图像、列表项内容在尾部被断开的问题处理。

  1. 方案选用的是直接调用window.print()方法;
  2. 本次用到的只是处理固定块内容不被截断,对于不想被断开的元素设置css值page-break-inside: avoid,例如:
    1
    2
    3
    4
    5
    .vo-cnt-list{
    li{
    page-break-inside: avoid;
    }
    }

备注

需要了解更详细的,可以参考 web打印的几种方案 打印样式设计