jquery打印html页面自动分页,前端实现指定位置分页、多页打印功能(jquery.print.js)...

本文介绍了如何使用jQuery插件jquery.print.js实现HTML页面的自动分页和局部打印,特别是在包含Echarts图表的情况下。通过将Echarts图表转换为图片并利用插件的append属性,实现了在指定位置分页打印的功能。同时,文章还讨论了在打印结束后清理生成的图片以保持页面整洁。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. 分类

原生打印,window.print() 实现

插件实现,很多种,我这里选择的是 jquery.print.js

优缺点

原生打印的好处就不多说了,简单方便,全屏打印,如果对打印功能没有什么特殊要求可以直接使用即可;

使用插件的好处可以很方便的实现局部打印以及对各种功能的配置

项目需求

打印医院报告单,单子上的内容比较多,且会有 echarts 图表;在表单的地步会展示列表数据表示图表中标注点的信息。且要求该列表信息另起一页。

tips: 注意我标注出来的知识点,echarts 在 print 的打印预览中无法正常显示,是一片空白。至于指定位置分页,网上说的增加代码 style="page- break-before:awlays;" 或者是 style="page- break-after:awlays;"在指定位置分页都尝试过,之后的内容虽然没有在第一页显示但是预览时的节面总数仍然是一页(可能是我的用法有问题或者浏览器有问题,如果知道的小伙伴请告诉我,谢谢)

如何在成功打印出 echarts 表格数据

1.这个其实很好解决,大家搜一搜就能够知道,主要就是把 echarts 图表转换成图片,这里的一个注意点就是在打印完成或者取消打印的时候把生成的图片去除并删除图片

// html

// echarts 本身提供了把图表转换成图片的方法

let image = new Image();

let imgSrc = this.logChartDialog.getDataURL();

image.src

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值