jquery打印html页面自动分页,前端实现指定位置分页、多页打印功能(jquery.print.js)...
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 = imgSrc;
image.setAttribute("id", "printImage");
image.onload = function() {
$("#dialogChartBottom").prepend(image); // 把生成的图片插入你想要打印的位置,这个根据自己实际情况
image.style.display = "block";
image.style.width = "100%";
$("logChartDialog").css({
display: 'none'
})
$('#printRecord').print({ // 注意这里使用需要引入 jquery.print.min.js,指定打印范围
globalStyle: true,
mediaPrint: true,
iframe: true,
})
// 打印结束
$("#logChartDialog").css({
display: 'block'
});
image.style.display = 'none';
$('#printImage').remove();
}
如何分页打印
说实话这个问题困扰了我好久,网上说的方法没有用。后来我突然发现了 jquery.print.js 里提供了两个属性,分别是 append,在当前打印内容后追加内容,格式是html,相信说到这里有些小伙伴们已经猜到了,没猜到也没关系,请看代码
// html
// echarts 本身提供了把图表转换成图片的方法
let image = new Image();
let imgSrc = this.logChartDialog.getDataURL();
image.src = imgSrc;
image.setAttribute("id", "printImage");
image.onload = function() {
$("#dialogChartBottom").prepend(image); // 把生成的图片插入你想要打印的位置,这个根据自己实际情况
image.style.display = "block";
image.style.width = "100%";
$("logChartDialog").css({
display: 'none'
})
let html = $(".tipmsg-list-area").html();
$('#printRecord').print({ // 注意这里使用需要引入 jquery.print.min.js,指定打印范围
globalStyle: true,
mediaPrint: true,
iframe: true, // 预览是否生成一个 iframe 实现
noPrintSelector: ".tipmsg-list-area", // 这里是 jquery 选择器的格式,表示不打印的内容区域
append: html, // 在打印区域后添加内容,格式是 html
})
// 打印结束
$("#logChartDialog").css({
display: 'block'
});
image.style.display = 'none';
$('#printImage').remove();
}
总结:以上即可在页面的指定位置分页。之前是即使内容超过一页但是预览的总页数还是一页。如果有问题可以留言。其他就是正常使用 echarts 的操作了
jquery打印html页面自动分页,前端实现指定位置分页、多页打印功能(jquery.print.js)...相关推荐
- web页面打印 用Css 打印指定div 指定位置分页
用Css指定打印标签 有两个地方需要注意: 1.CSS的@media print {}里面添加不需要打印(display:none) 和 要打印(display:block) 的DIV: 2.如果页面 ...
- Vue 页面跳转到指定位置
Vue 页面跳转到指定位置 页面跳转 页面 script style 进阶版:随着页面滚动变换导航菜单样式 监听页面滚动方法 销毁滚动 页面跳转 页面 <template><div ...
- jquery打印html页面自动分页,jQuery打印指定区域Html页面并自动分页
最近项目中需要用到打印HTML页面,需要指定区域打印,使用jquery.PrintArea.js 插件 用法: $("div#printmain").printArea(); 但还 ...
- 点击置顶按钮页面置顶到指定位置
列子: <!--顶部--><div id="top"></div> <!--置顶按钮(需要将按钮移到指定位置,这里没有加样式了)--> ...
- 打印Html页面自动分页
在想要分页的地方添加一行代码即可 <div style="page-break-after: always;"></div> 添加后用chrome浏览器用j ...
- 页面缓冲滚动到指定位置
引自https://segmentfault.com/a/1190000016839122?utm_source=weekly&utm_medium=email&utm_campaig ...
- 如何使用jquery判断一个元素是否含有一个指定的类(class)
如何使用jquery判断一个元素是否含有一个指定的类(class) 一.总结 一句话总结:可以用hasClass方法(专用)和is方法 1.is(expr|obj|ele|fn)的方法几个参数表示什么 ...
- div滚动到指定位置 vue_Vue列表实现滚动到指定位置样式改变
这个需求大概是这样子: 我做的一个聊天Demo,在搜索框搜索用户,可以滚动到指定的用户.然后成选中状态. 这是目前状态,我搜索南宫仆射 ,想要下面的用户列表直接滚动到 南宫仆射 并改变CSS样式. 查 ...
- 将Python Pandas DataFrame写入docx文档指定位置
http://www.lzys.cc/p/1168451.html https://www.yinyubo.cn/?p=352 from docx import Document import pan ...
最新文章
- Linux实现后台运行程序及查看nohup jobs
- Git之深入解析如何重写提交历史
- oracle中的合并查询
- gdal for java_gdal java环境配置
- head first设计模式 pdf_设计模式之观察者模式
- UI----------------Toggle
- 一天干掉一只Monkey计划(一)——基本光照模型及RT后处理 【转】
- [转载] 丛林中的糖果小屋
- 大众点评Cat源码分析(四)——Report读写逻辑
- 20篇聊天机器人领域必读论文速递!
- 公民个人信息保护方案汇总
- 浏览器拉起APP(深度链接)——scheme方法
- One Billion Customers
- BUUCTF:[INSHack2018]Self Congratulation
- 基于SpringBoot的共享汽车管理系统
- 小技巧 - 如何将“比例比例”站上的视频下载到本地?
- V831——车牌识别
- Mysql delete删除表数据之后,表空间没有释放的问题
- 主成分分析法(PCA)解析与MATLAB实践
- android怎么设置图片缩放比例,Android按比例缩放图片
热门文章
- 91手机助手PC安卓版官网版
- 软件工程基础课-结对项目-地铁
- 国内使用android pay,Android实现类Apple Pay虚拟卡
- [AcWing] 1018. 最低通行费(C++实现)数字三角形模型
- 【GPU精粹与Shader编程】(五) 《GPU Gems 2》全书核心内容提炼总结 · 下篇
- 移动网速测试数据及对比,附2019年北京移动校园卡套餐信息
- 分享5个免费、高清、无版权视频素材网站,果断收藏!
- 软件架构之 23种设计模式
- Anaconda3安装和添加清华镜像文件 教程
- 一般过去时的讲解(simple past tense)