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

最新推荐文章于 2024-05-09 09:30:00 发布

置顶

Steivy

最新推荐文章于 2024-05-09 09:30:00 发布

阅读量6.4k

点赞数 8

分类专栏： Web Html 分页打印 HTML 表格打印跨页 HTML打印页眉、页脚、页码自定义文章标签： html 云打印 web printf js

本文链接：https://blog.csdn.net/chao141yang/article/details/108991252

版权

博客介绍了如何解决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=

最低0.47元/天解锁文章

Steivy

关注

8
点赞
踩
31

收藏

觉得还不错? 一键收藏
7
评论
HTML分页打印。Web打印控件，完美解决页面排版、结构复杂，内容、图片、表格跨页断裂，自定义页面设置、页眉、页脚、页码，保持原文CSS等难题

1.Web html 分页打印；2.内容、图片、表格跨页断裂，封边；3.table并行、并列双边、重边；4.自动计算页码（总数及每一页），样式、位置、形式完全个性化；5.页眉页脚，去除浏览默认，自定义内容、样式、位置；6.保持页脚在页面底部，而非紧接正文内容；7.保持原文CSS样式；8.便捷自定义设置工具条；9.调用、语法简单，便捷。
复制链接

扫一扫