`
wdmcygah
  • 浏览: 62447 次
社区版块
存档分类
最新评论

Chrome下最简分页打印方案

阅读更多

如果你需要直接打印当前页面,那么你不用再往下看了,直接使用浏览器自带的工具栏中的“打印”即可。如果你的实际需求是页面上显示很多内容,但你只想打印指定区域的内容,进一步可能还想把本来显示在一起的内容,分成好几页进行打印,那么本文希望能够提供一个最简方案。

实现的方法其实很简单,直接使用JavaScript自带window.print()方法即可实现类似点击浏览器进行打印的效果,不过这种方式是打印当前窗口的内容(即body的整个内容)。如果只想打印指定区域的内容怎么办呢?最简单的思路是将body的内容先替换成指定区域的内容,再进行内容的还原即可。如果指定区域本就在一页内容里面,需要硬拆成好几页进行打印怎么办呢?这里借助下CSS里面的打印属性即可,在打印时会根据页面样式把内容分成自定义的多页。

下面直接贴代码:

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
	<div id="printContent">
		<div id="page1">这是第一页内容</div>
		<!--这里用到分页样式-->
		<div style="page-break-after: always;"></div>
			
		<div id="page2">这是第二页内容</div>  
		<div style="page-break-after: always;"></div>
			
		<div id="page3">这是第三页内容</div>
	</div>
	<div>
		<input type="button" id="printButton" value="打印" />
	</div>
	
    <script src="js/jquery-1.11.1.js"></script>
    <script>
		$("#printButton").click(function(){
			var bodyContent = $('body').html();
			var printContent = $('#printContent').html();
			//将body内容替换后进行打印操作,再把body内容还原
			$('body').html(printContent);
			window.print();
			$('body').html(bodyContent);
			}
		);
	</script>
  </body>
</html> 

这里为了写法简洁,引用了Jquery插件,实际只用原生JS完全就能搞定了,思路是一致的就行。如果你需要分很多页,那么把CSS分页样式抽出来,写在样式表里面再引用就可以了。另外该示例只支持Chrome下的打印。

分享到:
评论

相关推荐

    chrome浏览器实现打印预览打印功能.zip

    Chrome浏览器作为最流行的浏览器之一,其打印预览和打印功能对于开发者和用户来说都具有很高的实用价值。本篇将详细介绍如何在Chrome浏览器中实现打印预览及打印功能,并提供相关的技术资源。 首先,Chrome浏览器的...

    jquery打印HTML表格自动分页

    当涉及到HTML表格的打印和分页时,jQuery可以提供便利的解决方案。"jquery打印HTML表格自动分页"这个主题是关于如何利用jQuery来实现在用户打印HTML表格时自动进行分页的功能,这样可以确保长表格在打印时不被裁剪,...

    lodop 6.057打印(2012最新版) 兼容chrome、IE、firefox 终身免费

    1. **跨浏览器支持**:Lodop 6.057版本能够无缝对接Chrome、IE和Firefox,解决了不同浏览器环境下打印问题的困扰。这对于开发者来说,意味着无需为每个浏览器编写特定的打印代码,大大提高了开发效率。 2. **易于...

    调用IE内置打印组件完成web打印方案及例程

    ### 调用IE内置打印组件完成Web打印方案及例程 #### 一、概述 在Web开发领域,实现网页内容的打印功能是一项常见的需求。本文档将详细介绍如何利用Internet Explorer(IE)浏览器内置的打印组件来实现网页内容的...

    web页面批量打印

    分页是批量打印中的关键部分,尤其是当每个报告单需要单独占一页时。在HTML和CSS中,可以使用以下技巧进行分页控制: 1. CSS `@media print` 查询:针对打印媒体类型定义不同的样式,比如设置页眉和页脚,以及分页...

    lodop(唠叨普) 打印神器

    通过JavaScript或VBScript调用这些接口,你可以控制打印的页眉页脚、纸张大小、打印方向、页边距等参数,甚至可以实现分页、水印、套打等功能。此外,Lodop还支持动态数据绑定,这意味着网页中的实时数据可以直接...

    web网页最好用的打印控件Lodop6。145

    【标题】"web网页最好用的打印控件Lodop6.145"涉及到的是在Web应用中实现高效、灵活打印的技术方案。Lodop是一款专业的网页打印控件,它为网页开发者提供了强大的打印功能支持,使得在浏览器环境下进行文档、图片、...

    jquery.PrintArea.js-2.4.0-打印功能.rar

    3. **测试兼容性**:在多种浏览器下进行充分的测试,确保打印效果一致。 4. **用户体验**:提供清晰的打印提示,让用户知道哪些内容会被打印,避免混淆。 通过掌握jQuery PrintArea.js,开发者可以快速集成打印功能...

    最好用的免费网页打印控件 Lodop 5.059

    3. **功能丰富**:Lodop 提供多种打印功能,如分页打印、图片打印、PDF打印、HTML文档打印,甚至支持条形码和二维码的打印。此外,它还可以进行页面设置,包括纸张大小、方向、边距等,以及自定义页眉和页脚。 4. *...

    Web开发-Lodop打印控件实践

    比如,它支持分页打印,可以在指定的位置自动插入分页符;支持自定义页眉和页脚,可以添加时间、页码等信息;支持多联打印,对于收据、发票这类需要多份副本的场景非常实用。此外,Lodop还能实现预览、打印队列管理...

    Web通用打印模块

    【Web通用打印模块】是一个专为Web应用设计的打印解决方案,旨在解决在各种浏览器环境下进行高效、便捷打印的问题。这个模块被从一个办公系统中独立出来,表明它具有高度的可移植性和兼容性,能够适应不同的工作场景...

    前端打印模块hiprint

    5. **多页处理**:处理长内容分页问题,确保内容能正确分布在多个打印页上。 6. **跨平台兼容**:考虑到不同的浏览器和操作系统,Hiprint可能已经优化了兼容性,能在Chrome、Firefox、Safari、Edge等多种浏览器中...

    js web 打印 第三方打印控件免费版本

    在Web开发中,有时我们需要实现从网页上直接打印的功能,特别是在没有本地打印API支持的情况下。在这种情况下,第三方打印控件就显得尤为重要。本文将详细探讨使用JavaScript(js)进行Web打印,特别是关于“Lodop”...

    scriptx打印插件

    1. **连续打印**:ScriptX允许用户进行无边界、连续的打印作业,这意味着可以一次性打印多页文档,而无需人工干预或设置分页。这对于批量生产报表、标签或其他需要连续输出的场景非常有用。 2. **自定义打印**:...

    WEB打印结合Lodop6.2

    Lodop还支持PDF打印、多页打印、分页打印、条码打印、二维码打印等多种高级功能。例如,通过ADD_PRINT_PDF可以实现PDF文档的直接打印,而ADD_PRINT_TABLE则能方便地打印表格数据。 六、优化与调试 在实际应用中,...

    调用浏览器中的打印功能

    接着,我们讨论分页打印。在HTML中,可以通过CSS的`page-break-after`和`page-break-before`属性来控制页面断点,以实现内容的分页。例如: ```css div.noprint { page-break-after: always; } ``` 这将在每个`div....

    lodop打印插件

    Lodop打印插件是一款在IT行业内广泛使用的网页打印解决方案,尤其在企业和教育领域中颇为流行。它的主要功能是提供一个高效、便捷的方式来管理和控制网页打印任务,极大地优化了打印流程,降低了用户操作复杂性。 ...

    Web页Lodop打印控件

    Lodop还具有其他优势,比如跨平台兼容性,它不仅支持Windows系统下的IE、Chrome、Firefox等主流浏览器,还支持Mac系统的Safari等。此外,Lodop提供了良好的技术支持和服务,确保用户在使用过程中遇到问题时能得到...

    WEB打印,网页打印

    3. **分页打印**: - 在HTML中,可以使用CSS的`page-break-after: always`属性实现分页。例如,当遇到`&lt;P&gt;`标签时,浏览器会在该段落之后强制插入一个新页。这对于长文档的打印尤其有用,确保每个部分都在新的一页...

    jQuery打印插件PrintArea

    jQuery PrintArea是一款实用的前端打印解决方案,专为网页开发者设计,使得用户可以方便地选择并打印网页中的特定区域。这个插件的核心功能是通过简单的API调用来设置需要打印的内容,避免了全屏打印或者不必要的...

Global site tag (gtag.js) - Google Analytics