学习web打印以及强制分页

原创已于 2023-10-16 11:20:44 修改 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #css3 #前端

于 2023-03-03 16:39:34 首次发布

文章介绍了Web打印的两种主要方式：浏览器自带的window.print()方法及其局限性，以及使用Print.js第三方库的优势和用法。Print.js支持多种类型的内容打印，包括HTML、PDF等，但仍然存在样式问题和预览页面弹出的问题。另外，文章还讨论了CSS的page-break-after属性在强制分页中的应用及其在Firefox和特定CSS设置下的限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、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: ['*']
      })
}

具体配置如下，也可以传入配置对象，具体请查看官网Print.js - Javascript library for HTML elements, PDF and image files printing.

兼容性：

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

二、强制分页

css属性：page-break-after

<style>
        .paging {
            page-break-after: always;
        }
</style>

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

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

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

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

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

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

1. Firefox不允许将独立的表分割，将要分页的数据放在<p>标签或者<div>标签。
2. 如果body中有style="overflow-y:auto" 属性，部分浏览器的"page-break-before"就不起作用