Printjs:自定义网页打印功能插件库

科技   2024-11-30 19:29   湖北  


文章底部获取项目地址



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:应用于标题文本的可选样式。
maxWidth:打印文档的最大宽度(像素)。
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:浏览器打印对话框关闭后执行的回调函数。
onError:发生错误时执行的回调函数。
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

前端资源推荐
推荐分享各种前端组件UI、插件工具、中后台系统、低代码、可视化、开源项目、学习资源、特效源码等
 最新文章