striveCode icon indicating copy to clipboard operation
striveCode copied to clipboard

分页打印处理

Open itstrive opened this issue 7 years ago • 0 comments

有时候打印需要做分页处理。

可以使用css中的 page-break-after 或者 page-break-before 处理。

通用处理可以

<div style="page-break-after: always;"></div>

放到想分页的地方即可,当然您也可以定义一个class,扔到想分页的元素身上。

可以参考:

  • http://www.w3school.com.cn/cssref/pr_print_page-break-after.asp
  • http://www.w3school.com.cn/cssref/pr_print_page-break-before.asp

另外打印 推荐大家一个小库 PrintJs

github地址: https://github.com/crabbly/Print.js

简单使用:

        const style = `@media print{h3{color:red}}`
        printJS({
            printable:'需要打印DOM节点的id',
            type:'html',
            documentTitle:'打印的页眉',
            style: style,
            scanStyles: false
        });

itstrive avatar Aug 22 '18 08:08 itstrive