HTML分页打印。Web打印控件,完美解决页面排版、结构复杂,内容、图片、表格跨页断裂,自定义页面设置、页眉、页脚、页码,保持原文CSS等难题

博客介绍了如何解决HTML打印时遇到的难题,如内容跨页断裂、页眉页脚自定义、页码计算等。通过分析现有主流打印插件,提出了一套技术方案,包括HTML分页、CSS防止内容断裂、CSS去除默认页边距和页眉页脚,以及JavaScript实现页码计算。同时,提供了具体的实现思路和代码示例。
摘要由CSDN通过智能技术生成

前言:解决那些打印难题?

  • Web Html 分页打印
  • 内容、图片、表格跨页断裂,封边
  • table并行、并列双边、重边
  • 自动计算页码(总数及每一页),样式、位置、形式完全个性化
  • 页眉页脚,去除浏览默认,自定义内容、样式、位置
  • 保持页脚在页面底部,而非紧接正文内容
  • 保持原文CSS样式
  • 便捷自定义设置工具条
  • 调用、语法简单,便捷

成果展示

提示:以下是为实践demo
调整后

自定义设置工具条
自定义设置工具条

打印结果调整后打印结果

原文打印结果
原文打印结果



一、现有主流打印插件

1.printThis

printThis 【官网】

  • 打印特定的和多个DOM元素;
  • 保留页面CSS /样式或添加新CSS
  • 保留表单条目
  • 画布支持

代码如下(示例):

$("#mySelector").printThis({
   
    debug: false,               // show the iframe for debugging
    importCSS: true,            // import parent page css
    importStyle: false,         // import style tags
    printContainer: true,       // print outer container/$.selector
    loadCSS: "",                // path to additional css file - use an array [] for multiple
    pageTitle: "",              // add title to print page
    removeInline: false,        // remove inline styles from print elements
    removeInlineSelector: "*",  // selectors to filter inline styles. removeInline must be true
    printDelay: 333,            // variable print delay
    header: null,               // prefix to html
    footer: null,               // postfix to html
    base: false,                // preserve the BASE tag or accept a string for the URL
    formValues: true,           // preserve input/form values
    canvas: false,              // copy canvas content
    doctypeString: '...',       // enter a different doctype for older markup
    removeScripts: false,       // remove script tags from print content
    copyTagClasses: false,      // copy classes from the html & body tag
    beforePrintEvent: null,     // function for printEvent in iframe
    beforePrint: null,          // function called before iframe is filled
    afterPrint: null            // function called before iframe is removed
});

2.jQuery.print

jQuery.print 【GitHub】

  • 和printThis类似,提供丰富的配置参数
  • 使用方便,熟悉的语法及调用模式

Usage(用例):
引入:

<script type="text/JavaScript" src="/jquery.print.js"></script>

使用:

$("#myElementId").print(/*options*/);

或者

$.print("#myElementId" /*, options*/);

小结:printThis、jQuery.print是属于类似的js(jQuery)打印插件,
基本功能可以满足,细节和个性化的需求实现困难
比如页眉、页脚、页码的设置,自定义边居等

可配置的一些参数:

$("#myElementId").print({
   
       	globalStyles: true,
       	mediaPrint: false,
       	stylesheet: null,
       	noPrintSelector: ".no-print",
       	iframe: true,
       	append: null,
       	prepend: null,
       	manuallyCopyFormValues: true,
       	deferred: $.Deferred(),
       	timeout: 750,
       	title: null,
       	doctype: '<!doctype html>'
});

3.Lodop

Lodop【官网】

  • ↑劳道谱,挺全面,功能强大,一款优秀的Web打印控件;
  • ↑支持打印预览、打印设计、打印维护
  • ↑套打很方便
  • ↓语法相对复杂,页面控制类似画
  • ↓需要安装启动服务
  • ↓运行效率略低

嵌入方式

通常情况下,在页面中嵌入Lodop如下引用代码,然后用一个全局对象变量来使用控件:
·在head或body中加入:

<script src="LodopFuncs.js"></script>
<object  id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=
  • 8
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值