Print.js 是一个用于在 Web 应用中打印 HTML 文件元素的 JavaScript 库,允许开发者在网页上轻松实现打印功能,可自由修改打印样式,支持四种打印文档类型,包含 PDF、HTML、Image 和 JSON。// 引入 Print.js
import printJS from 'print-js'
// 打印按钮点击事件
document.getElementById('printButton').addEventListener('click',
function() {
printJS({
printable: 'element-to-print', // 要打印的元素的ID
type: 'html', // 打印类型,这里是HTML
style: 'print.css' // 打印样式表
});
});
printable:要打印的文档源,可以是 PDF 或图像的 URL、HTML 元素的 ID 或 JSON 数据对象。type:可打印类型,可用选项有 pdf、html、image、json 和 raw-html。header:打印 HTML、图像或 JSON 时使用的可选标题,将放置在页面顶部,可以接受文本或原始 HTML。headerStyle:应用于标题文本的可选样式。css:要应用到打印的 HTML 的一个或多个 CSS 文件的 URL。style:应用于打印的 HTML 的自定义样式字符串。scanStyles:当设置为 false 时,库将不处理应用于打印的 HTML 的样式,适用于使用 css 参数时。targetStyle:要处理的特定样式数组,例如 ['padding-top', 'border-bottom']。targetStyles:与 targetStyle 类似,但处理一系列样式,例如 ['border', 'padding'] 将包括所有相关的边和填充样式。ignoreElements:在打印父 HTML 元素时,要忽略的 HTML ID 数组。properties:用于打印 JSON 数据时的对象属性名称数组。gridHeaderStyle:打印 JSON 数据时,表格头部的可选样式。gridStyle:打印 JSON 数据时,表格行的可选样式。repeatTableHeader:用于打印 JSON 数据时,设置为 false 时仅在第一页显示数据表头。showModal:启用此选项以在检索或处理大型 PDF 文件时显示用户反馈。modalMessage:当 showModal 设置为 true 时显示给用户的消息。onLoadingStart:当 PDF 正在加载时执行的函数。onLoadingEnd:在 PDF 加载完成后执行的函数。documentTitle:打印 HTML、图像或 JSON 时显示的文档标题。fallbackPrintable:当浏览器不兼容时,用于在新标签页中打开的备用 PDF 文档。onPdfOpen:当浏览器不兼容时,PDF 在新标签页中打开时执行的回调函数。onPrintDialogClose:浏览器打印对话框关闭后执行的回调函数。base64:用于打印作为 base64 数据传递的 PDF 文档。简单易用:Print.js 的 API 设计简洁直观,即使是对 JavaScript 不太熟悉的开发者也能快速上手。它提供了简单的方法来打印网页内容或任何 DOM 元素。跨浏览器支持:Print.js 能够在所有主流浏览器上运行,包括 Chrome、Firefox、Safari、Edge 以及 Internet Explorer,确保了广泛的兼容性。灵活的打印选项:Print.js 不仅可以打印整个网页,还可以选择性地打印页面上的特定部分。这使得开发者可以根据需要定制打印内容。支持打印样式:Print.js 允许开发者定义打印样式,这意味着你可以为打印输出专门设置样式,而不影响屏幕上的显示效果。无依赖性:Print.js 是一个独立的库,不依赖于其他 JavaScript 框架或库,这使得它非常轻便,易于集成到任何项目中。易于集成:你可以很容易地将 Print.js 集成到现有的项目中,无论是使用 npm、yarn 还是直接通过 script 标签引入。
《前端资源推荐》公众号收集各种前端组件 UI 框架、JS 插件工具、中后台系统模板、动画库、低代码、可视化资源、开源项目、学习资源、特效源码等,如有其他优秀资源,欢迎发消息投稿,感谢点赞、在看、转发、关注!!!
Uppy:支持断点续传 模块化的文件上传库
kkFileView:支持数十种文件格式预览开源工具库
Arco Design Mobile:字节新开源移动端 UI 组件库
V3 Admin Vite:低成本上手 中后台管理系统模板
Vxe Table:Vue3 支持超大数据量渲染的表格组件
F2:蚂蚁开源 跨平台多端可视化图表
勾股 OA:开源 企业办公管理系统
Fabricjs:交互式 canvas 图形绘制库
GitHub:https://github.com/crabbly/Print.js
官方文档:https://printjs.crabbly.com