Web打印一直是前端开发中的一个技术难点。从最早的window.print()到现代的多种解决方案,Web打印技术经历了显著的发展。 本文将深入分析Web打印的技术演进,并介绍基于无头浏览器的现代解决方案。 Web打印技术演进历程第一代:原生window.print()最早的Web打印方案就是浏览器原生的window.print()方法。 现代方案解决了传统方案的各种痛点,为Web应用提供了高质量的打印能力。 打印方案,如web-print-pdf这个npm包,为开发者提供了一个成熟、可靠、易用的解决方案,值得在有Web打印需求的项目中考虑使用。
在Web应用开发中,打印功能一直是一个令人头疼的问题。传统的Web打印方案存在样式丢失、兼容性差、功能单一等诸多痛点。 最近偶然发现了一个名为web-print-pdf的npm包,在调查了几款常见的Web打印实现后,发现大多数技术方案都比较晦涩难懂,而这个包提供了纯前端的体验,让我眼前一亮。 什么是web-print-pdf?web-print-pdf是一个基于Electron的跨平台Web打印解决方案,专为Web应用提供强大而灵活的打印能力。 Web打印解决方案,我发现大多数技术实现都比较复杂,学习成本较高。 而web-print-pdf这个包通过创新的技术架构和丰富的功能特性,为Web应用提供了完整的打印解决方案。
关键词:HTML打印, web-print-pdf npm包, 前端打印, 静默打印, 打印插件, CSS样式, JavaScript打印, 完美还原, 企业级打印, 打印解决方案摘要:本文深入探讨HTML 打印的完美解决方案,从传统打印插件的局限性出发,分析常见打印方案的实现原理和问题,最终重点介绍web-print-pdf npm包如何完美还原HTML、CSS、JavaScript的页面效果,为企业级Web npm包作为现代Web打印的完美解决方案,具有以下核心优势:1. 打印的完美解决方案,完美还原HTML、CSS、JavaScript的页面效果,为企业级Web应用提供最佳的打印体验。 在Web打印技术的演进过程中,web-print-pdf npm包代表了现代Web打印技术的最高水平,为开发者提供了完美的HTML打印解决方案。
怎么样来进行基于web的套打,就是这么一个令多数程序员头痛不已的问题。 基于web的套打,难度在于要将浏览器中呈现的html,精确地打印到票据中,而且能够实现对分页位置的控制。 下面就ie浏览器所能采用的套打解决方案,来个汇总分析,希望对大家有所帮助。 jatoolsPrinter 是一款实现网页套打的免费工具。 jatoolsPrinter通过在网页中嵌入控件,解决了web客户端精确打印,批量打印,打印配置自动保留等问题。 web的打印功能,这个控件已经把打印功能封装的非常好,主要是把这个控件引入,之后写一些简单的js代码就能完成相应的打印功能。 4. div的id必须连续,如果你的div,存在 'page1'、'page2'、'page4',而不存在'page3',则控件只打印前两页,'page4'不会被打印。
需求说明 这次的需求可能就比较简单了,就是实现web端的打印,但是是根据需求打印,而不是直接打印全部 效果预览 ? ? 我要做的是一个简单的打印,就是客户选择了一个dialog,这个时候需要将这个记录打印出来,直接打印就可以了 源码 /** * @printObj 打印 * @param printWindow width: 80px;height: 27px;line-height: 27px;margin-top: 10px;color: #FFFFFF;border: none;border-radius: 4px ;background: #4488E9">打印</button> </el-dialog> 这里需要 注意的是一点,就是打印的时候如果显示的不完全的话,可以直接选择横向打印,或者下面的更多选项中选择无边框打印就不会出现这样的问题了 当然如果只是打印当前的页面的话,那就是直接window.print就可以了。不应处理别的。
(当然,用户有各种各样的需求和打印格式要求,愿意使用打印控件的,开发的打印功能当然很好。) 所以直接使用浏览器自带的打印功能,就成为一个选择。 2. 打印功能介绍 2.1 普通打印 如果要将当前网页的内容直接打印到白纸上,很简单,使用如下js代码即可实现。 window.print(); 2.2 打印指定区域 2.2.1 简单打印某一区域 如果只需要简单打印当前网页的某一块内容,不难实现。 2.4 iframe打印 如果你的打印格式比较复杂,在现有页面通过上边介绍的方式实现起来比较麻烦,那就干脆使用iframe打印吧。 WEB打印如何设置默认为”仅选定打印框架”?
这篇文章给出一条“开箱即用、稳定、跨浏览器”的 Web 打印最简路线:使用 web-print-pdf(npm 包)。 为什么选择 web-print-pdf简单:API 极简,常见打印需求(PDF/HTML/图片、静默打印、批量打印)一步到位。 相比传统方案:和 Lodop 一类控件相比:无需控件安装、证书、浏览器兼容适配,前端接入更轻量。和纯浏览器方案相比:无需依赖用户交互弹窗或浏览器实验开关,静默打印更稳定。 </html>'), silent: true });4)打印图片import { printImageByUrl, printImageByBase64 } from 'web-print-pdf'; 小贴士:实际可用参数会因驱动与机型差异有所不同,建议先通过打印机列表与纸型查询接口进行校验。和其它方案的对比对比 Lodop:无需安装与授权,API 与前端生态更友好;同时保留纸型与静默能力。
文/谢康 做Web开发的人员一定都会面临一个共同的难题,那就是打印。 而Web应用则因为其特殊的呈现方式,只能寻求其他的解决方案。 现在我们来分析一下目前已经成形的Web打印方案: 现有的Web打印控制技术分成几种方案: 一.自定义控件完成打印 利用IE 自带的WebBrowser 控件实现打印 利用第三方控件实现打印 1、 自定义控件方式 一般情况下,主要使用JS 来实现DOM 文档的分析,DOM 为微软提 出的一种Web文档模型,主要用来实现Web脚本编程。 利用JS 可以分析源页面的内容,将欲打印的页面元素提取出来,实现打印。 总之,现有的打印方案各有所长,在开发过程中应根据用户的需求作选择,利用IE打印简单,容易实现,在用户需求简单或打印内容较少的情况下采用此方案比较适宜。
说明: 首先是创建一个打印对象 <OBJECT id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height= 0 width=0></OBJECT> 创建好后就可以使用该对象的各种方法进行打印操作: <input type=button value=打印 onclick=document.all.WebBrowser.ExecWB 以上的步骤就可以实现页面的打印了,但是如何设置打印区域和打印分页呢? ,Noprint类:在打印事不显示,CLASS属性设置为Noprint类样式的控件打印的时候不会显示;PageNext类设置的是分页,CLASS属性设置为PageNext类样式的控件将被作为打印分页点,
这是第4页打印事件:window.print() 1.单页打印(布局打印): function printCnt(){ //1.获取当前页的html代码 var body = window.document.body.innerHTML ; //2.要打印的部分(#print里面的内容就是要打印的内容) window.document.body.innerHTML =document.getElementById( //重新载入当前文档: location.reload(); } 注意:location.reload();要加,因可解决JS window.print()第二次点击事件失效问题 2.批量打印 height:300px;page-break-after:always" >报告单2
(3).如果使用window.open(“showPrint.html”,”print”); 打印预览页面的话 //如果是本地测试,需要先新建Print.html,如果是在域中使用,则不需要 // res 是后端返回的需要打印的xxx.html页面 var pwin=window.open(res,"print将条码标签打印系统接入SAPR/3或MySAP.com系统有三种途径: 1.最直接的方法就是利用SAPScript。在SAPScript中定义条码 库和标签版式,然后通过打印机驱动,完成打印任务。 就像SAP自动打印一样。 1>由Bartender控制打印: a.数据源选项 利用Bartender连接数据源的方法完成打印。 c>命令行方式 SAP系统可以通过配置,在要打印标签时,指定格式、数据、打印机并运行Bartender程序,将标签打印出来。 2>由SAP脚本控制打印 方法如下: a.用Bartender设计标签格式、打印机参数和选择打印机。 d.配置SAP,使其在要打印标签时,运行SAP脚本报告,这个脚本报告会将数据送到ITF中相应的数据项上,并送到指定的打印机上打印。
如果打印机设备厂商实现了Print Plugin并提供apk安装到系统,那么PrintSpooler就可以找到对应打印机驱动进行打印。 打印请求以Job方式进行管理。 通过LPD可以实现网络打印。有些打印机设备本身采用linux系统,开启了LPD后台服务,可以直接使用LPD协议进行打印。 Google云打印 Google提供了一项云打印的服务,可以将自己的打印机注册到Google的服务器上,通过其提供的API,可以实现随时随地使用不同设备客户端进行打印的功能,当然打印机支持Wifi并且能访问外国网站 打印机设备商提供SDK 打印机设备商一般会实现自己的打印SDK,这些SDK可能基于以上介绍的某些技术实现,比如CUPS。 其他 另外Android上其他打印方案包括使用一台Linux机器连接打印机,并作为打印服务器,使用Android设备将要打印的文件发送到Linux服务器上进行打印。
概述 在html页下使用Epson P60II 热敏纸下打印小票,使用的打印方案为调用window.print()。 objprinter.Write(String.fromCharCode(0x1B) + String.fromCharCode(0x69)); objprinter.Close(); } 3、设置隐藏模式打印 <style media="print">.Noprint { DISPLAY: none }</style> 4、填充数据 private void ListBind() {
1、 HttpPrinter(推荐)这个打印控件使用也较为简单,支持打印预览、直接打印、可设置页眉、页脚、页边距、打印份数、纸张大小等信息,支持强大的报表功能,管它什么报表, 交叉的,嵌套的,还是二维码 2、墙外打印控件墙外打印控件(QWPrint)是一款小巧的打印辅助软件,能够帮助众多制作B/S类程序的程序员更加灵活的控制客户端打印。 控制多种打印设置。程序员可以通过控件进行多项设置,包括设置打纸的页边距,页眉页脚,纸张大小等参数。.精确控制打印。可以方便实现web下的套打操作。. 3、楚琳Web打印控件楚琳Web打印控件是以C/S架构的报表工具进行B/S架构的报表设计有如下功能:.报表功能强大,报表设计采用FastReport,可以和水晶报表媲美,支持自定义纸张大小,支持直接打印 缺点是有时候打印响应速度会慢,大约需要10秒左右4、Peach-Printer打印组件 最近新用过的一款web打印组件。有在线的打印模版设计器可以方便的设计打印内容。
第三种方法:如果要打印的页面排版和原web页面相差很大,采用此种方法。 点打印按钮弹出新窗口,把需要打印的内容显示到新窗口中,在新窗口中调用window.print()方法,然后自动关闭新窗口。 DeskJet 870C" factory.printing.copies = 2 factory.printing.collate = true factory.printing.paperSize = "A4" (2,1) 关闭现在所有的IE窗口,并打开一个新窗口 Web.ExecWB(4,1) 保存网页 Web.ExecWB(6,1) 打印 Web.ExecWB(7,1) 打印预览 Web.ExecWB(8,1 ) 打印页面设置 Web.ExecWB(10,1) 查看页面属性 Web.ExecWB(15,1) 好像是撤销,有待确认 Web.ExecWB(17,1) 全选 Web.ExecWB(22,1) 刷新 &w&b页码,&p/&P" hkey_key="\footer" RegWsh.RegWrite hkey_root+hkey_path+hkey_key,"&u&b&d" end function 4、
, 打印解决方案摘要:本文深入分析了SumatraPDF作为Web静默打印引擎的技术实现,重点介绍了web-print-pdf npm包如何巧妙集成SumatraPDF实现无预览静默打印功能。 传统的Web打印方案存在用户交互、兼容性差等问题,而SumatraPDF作为轻量级的PDF阅读器,其强大的命令行打印能力为Web静默打印提供了完美的解决方案。 name || 'default'; }}技术架构对比传统Web打印方案的问题在Web开发中,传统的打印方案存在以下问题:window.print()限制:样式丢失、兼容性差、无法静默打印浏览器差异 npm包作为现代Web打印解决方案,巧妙地集成了SumatraPDF作为其核心打印引擎,解决了传统方案的所有问题:// web-print-pdf npm包的核心架构import webPrintPdf 选择web-print-pdf npm包,就是选择了一个成熟、可靠、易用的Web打印解决方案。
【资源名称】:打印纸大全 【资源版本】:v1.9.0 【资源大小】:31.7MB 【资源介绍】: 打印纸大全是一款拥有各种格式的模板的 A4 纸打印工具,在您想做笔记的时候您可以不用购买专门的笔记本随时随地打印一张笔记纸 ,在您想做打卡任务时候您可以 hi 选择打印一张打卡纸随用随打特别方便,只要您有 A4 纸跟打印机,您就可以随时可以打印出我们提供给您的超多种类的纸模板。 【软件特色】: 1、超多打印模板:我们现有分类 精选、学习、工作、设计、生活; 2、超清模板:每一个模板都是超清版本,打印出来清晰自然,跟买的本子几乎没什么差别; 3、直接打印:能直接调用打印机进行打印 ,并支持调节打印机打印使用非常方便; 4、文档打印:支持手机内 PDF 文档预览跟打印,手机内的 PDF 文档可以直接使用本 APP 调用打印机进行打印; 5、自制打印纸:支持自定义田字格、回字格、米字格 、线条、拼音等打印纸样式。
我们在制作条码标签的时候,一般都是使用标签打印机打印在专门的标签纸上。但是也有一种情况就是设计完标签后在A4纸上打印,这样一张纸上就可以打印多张标签。具体如何操作小编将详细介绍。 05.png 六、点击打印预览,选择打印机,在纸张大小处选择A4,方向根据自己的需要选择横向或者纵向。然后在卡片排版里点击铺满纸张,记录范围调整到需要的数量。 06.png 全部设置完成了,就可以开始打印了。这种方式也可以批量打印二维码,更多功能介绍我们会陆续推出,感兴趣的小伙伴请多多关注我们。
项目中,需要对页面的部分div进行打印,为了保证界面布局不乱,采取了新建iframe的方法。 将需要打印的div放到iframe中,然后调用iframe进行打印,就可以很好的实现局部打印的效果了。 DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>test</title
15 <h4>一列:</h4> 16| 100</ {
56 window.document.body.removeChild(iframeNode); // 原本是放在最后的,但是IE会因为remove掉了而无法打开打印窗口 1.5K20发布于 2018-10-25 来自专栏葡萄城控件技术团队 突破技术限制,实现Web端静默打印作为Web开发的同僚们,估计都有一个共同的烦恼,Web端为什么不能够像 CS端那样直接打印预览?直接移除掉打印预览界面不就可以了? 真实情况是Web端受限于浏览器的权限,无法直接访问打印机等本机资源。 所以,在Web上实现无预览和打印并不是一个简单的问题,而是突破权限、突破平台的问题。 在如此严峻的形势之下,外加众多用户都追着询问这个问题,静默打印在 Web端的功能实现也是非常急迫的。 现在大部分打印过程基本是将需要打印的内容导出为PDF文件,然后调用浏览器的打印预览,进行打印。 搜索后,我们找到在Chrome 和火狐浏览器的设置中,有解决的方法,这法子看着像模像样,点赞也很多: 大致内容是: 进入 Chrome的高级设置,设置浏览器默认的主页为我们的 Web应用需要静默打印的页面 点击设置 外观-设置显示主页按钮,并输入我们要访问的 Web页面。 打开桌面快捷方式,修改在后缀输入--kiosk --kiosk-printing。 而走到这一步,此路就不通了。 3K10编辑于 2022-05-09 |