Printer_js_css纯js实现web打印服务，完全兼容_printjs打印样式丢失资源-CSDN下载

共5个文件

html：2个

js：2个

css：1个

web打印

js打印

兼容浏览器

浏览器打印

需积分: 48 179 浏览量 2018-08-22 14:37:25 上传评论 1 收藏 29KB ZIP 举报

在现代Web开发中，提供打印功能是不可或缺的一部分。"Printer_js_css" 是一个纯JavaScript实现的Web打印服务，它的核心特点在于它能够实现跨浏览器的兼容性，这意味着无论用户使用何种浏览器，都能顺利地进行打印操作。这个工具的出现，为开发者提供了极大的便利，避免了在不同浏览器之间进行繁琐的适配工作。我们要理解“Web打印”的概念。Web打印是指用户通过浏览器对网页内容进行打印的操作，这通常涉及到HTML、CSS和JavaScript的协同工作。在传统的Web打印中，浏览器自带的打印功能可能因为样式丢失或者布局错乱等问题，导致打印效果不尽如人意。而 Printer_js_css 正是为了解决这些问题而设计的。 JavaScript打印服务主要通过调用浏览器的`window.print()`方法来实现，但仅仅依赖这个方法往往无法满足复杂的需求。Printer_js_css 提供了更高级的功能，例如预览、选择打印机、设置打印选项等，这些都是通过自定义的JavaScript代码和CSS样式来实现的。通过这种方式，我们可以确保打印出来的内容与屏幕显示的一致性，提高用户体验。在兼容性方面，Printer_js_css 已经经过测试，能在多种浏览器环境下正常工作，包括但不限于Chrome、Firefox、Safari、Edge以及旧版本的Internet Explorer。这对于那些需要服务于广泛用户群的Web应用来说，是一个非常重要的特性。兼容性问题一直是开发者头疼的问题，而 Printer_js_css 的出现，使得开发者可以更加专注于应用的其他功能开发，而不是在浏览器兼容性上花费过多的时间。在实际应用中，Printer_js_css 可能会用于各种场景，例如发票打印、报告生成、合同签署等。通过控制打印范围，我们可以只打印网页的特定部分，比如用户选定的数据或特定的表格。同时，通过调整CSS样式，可以实现美观的打印布局，确保打印出来的内容清晰易读。文件列表中的 "print" 文件可能是项目的源代码或者示例文件，包括JavaScript库本身、示例HTML页面以及可能的CSS样式文件。通过查看这些文件，开发者可以了解Printer_js_css的工作原理，学习如何在自己的项目中集成和定制打印服务。 Printer_js_css 是一个强大的Web打印解决方案，它利用JavaScript和CSS实现了跨浏览器的打印服务，大大简化了开发者的工作。如果你的项目需要高质量的Web打印功能，那么 Printer_js_css 绝对值得你考虑和使用。

资源推荐

资源详情

资源评论

收起资源包目录

Printer_js_css.zip （5个子文件）

index.html 3KB

jquery.jqprint-0.3.js 2KB

jquery-1.4.4.min.js 77KB

print.css 408B

test.html 1KB

<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <script language="javascript" src="jquery-1.4.4.min.js"></script> <script language="javascript" src="jquery.jqprint-0.3.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script> <link href="print.css" rel="stylesheet" media="print"> <script language="javascript"> $(document).ready(function(){ $(".book").jqprint({debug: true,importCSS: true, printContainer: true, operaSupport: true}); }) </script> <style> @page { size: A4; margin: 0; } @media print { .page { margin: 0; border: initial; border-radius: initial; width: initial; min-height: initial; box-shadow: initial; background: initial; page-break-after: always; } .w3cbbs { page-break-after:always;} body { margin: 0; padding: 0; background-color: #FAFAFA; font: 12pt "Tahoma"; } * { box-sizing: border-box; -moz-box-sizing: border-box; } .page { width: 21cm; height: 29.7cm; margin: 0 auto; border: 1px #D3D3D3 solid; border-radius: 5px; background: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } .subpage { border: 5px red solid; height: 100%; } } } </style> </head> <body> <div class="book"> <div class="page w3cbbs"> <div class="subpage"> <table border="1" cellspacing="0" style="width:100%;margin-top:20px;margin-"> <tr height="25px" > <td>报修单号</td> <td colspan="3">{7}</td> <td>学生签字</td> <td></td> </tr> <tr height="25px"> <td rowspan="2" width="100px"> 报修地址 </td> <td id="printflag" rowspan="2" width="100px"> {0} </td> <td rowspan="2" width="100px"> 报修时间 </td> <td id="printtime" rowspan="2" width="100px"> {1} </td> <td width="100px"> 申请人 </td> <td id="printperson" width="100px"> {2} </td> </tr> <tr height="25px"> <td> 联系方式 </td> <td id="printphone"> {3} </td> </tr> <tr height="100px"> <td>报修项目</td> <td>{4}</td> <td>报修内容</td> <td>{5}</td> <td rowspan="2" colspan="2">{6}</td> </tr> <tr height="100px"> <td>维修人员</td> <td></td> <td>开始时间<br>完成时间</td> <td></td> </tr> <tr height="25px"> <td>使用材料</td> <td>数量</td> <td>单价</td> <td>金额</td> <td>材料提供</td> <td>备注</td> </tr> <tr height="25px"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr height="25px"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr height="25px"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr height="25px"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </div> </div> <div class="page w3cbbs"> <div class="subpage">Page 2</div> </div> <div class="page w3cbbs"> <div class="subpage">Page 3</div> </div> <div class="page w3cbbs"> <div class="subpage">Page 4</div> </div> <div class="page w3cbbs"> <div class="subpage">Page 5</div> </div> <div class="page w3cbbs"> <div class="subpage">Page 6</div> </div> </div> </body> </html>

评论收藏

内容反馈