学习web打印以及强制分页

2023-03-14 02:17| 来源: 网络整理| 查看: 265

一、web打印

直接使用浏览器打印：window.print()

优点：兼容性好缺点：适用场景狭窄；仅能识别内联样式，无法识别行内样式和外部样式

使用第三方库：如Print.js

优点：支持打印的类型多：PDF、HTML、IMAGE、JSON 支持行内样式与外联样式，再也不用在DOM元素上写满样式了兼容性好，除了IE不支持PDF和IMAGE打印外，其余主流浏览器全部支持缺点：可能出现的样式异常无法直接打印/静默打印，因为是调用chrome打印，还是会弹出打印预览页面

使用方法：

// 第一步：下载包 npm install print-js // 第二步：引入 import printJS from 'print-js' // 第三步：调用打印方法 printMedical () { // 调用打印插件，配置项参考官网：https://printjs.crabbly.com/ printJS ({ // printable为需要打印的DOM的id printable: 'xxx', // type为需要打印的类型 type: 'html', // css为样式文件或者直接css样式，支持导入整个css文件，或者css文件数组 css: medicalStyle, // 可选项，这样配置意味着应用所有导入的css文件 targetStyles: ['*'] }) }

具体配置如下，也可以传入配置对象，具体请查看官网https://printjs.crabbly.com/

兼容性：

注意：使用Print.js后，无法使用css属性page-break-after来进行强制分页。

二、强制分页

css属性：page-break-after

.paging { page-break-after: always; }

auto ：对页面分割没有影响。

always：强制在元素后出现页分割符。

avoid ：避免在元素后出现页分割符。

left ：在元素后面插入页分割符直到它到达一个空白的左页边。

right ：在元素后面插入页分割符直到它到达一个空白的右页边。

inherit ：使用与父元素相同的属性值。

1. Firefox不允许将独立的表分割，将要分页的数据放在

标签或者标签。 2. 如果body中有style="overflow-y:auto" 属性，部分浏览器的"page-break-before"就不起作用

【本文地址】

公司简介

联系我们