前端实现打印图像功能


Posted in HTML / CSS onAugust 27, 2019

前提:后台返回是绘制医用心电波形报告的数据,前端通过canvas在网页上绘制再进行打印并生成PDF文档!

一.  尝试LODOP打印插件

之前前端表单打印功能有使用过LODOP打印插件,需安装相应的LODOP的打印软件,lodop的使用方法2种。第一种方式是通过收集前端标签内容元素成对象 var   htmlstr= $("#ECGReport").html(); 通过 LODOP.ADD_PRINT_HTM(20,60, 400, 900,htmlstr); 的lodop方法导入到自带编辑的打印软件中进行打印,当然字体大小,颜色,加粗等都可以设置;第二种是自定义内容,模板样式已确定,可通过方法将打印内容一块块放入到打印区域中, LODOP.ADD_PRINT_HTM(20,60, 400, 900,'生成报告标题'); 并调节左右边距;但是使用第一种方式收集标签元素内容时候,发现不能收集到canvas里面的图层样式和内容,并果断放弃,如果网页无canvas绘制内容,可使用;

优点:可自定义打印内容和样式,打印百分比也可以编辑;缺点:需下载安装打印lodop打印软件,页面canvas的内容无法提取到打印区域;

二. 尝试前端window.print()

优点:代码编写方便,如配合谷歌浏览器提供的打印功能,操作很方便;

缺点:如整页有部分是打印内容,打印区域不方便控制,有一定失真;

三.尝试html2canvas + jsPDF.js

html2canvas(document.querySelector('#modelContents'), {
   allowTaint: true, taintTest: false, scale: '1', dpi: '300', background: '#fff'}
) .then(function(canvas) {  
//元素id为exportContent 
 let ctx =canvas.getContext("2d"); 
 var imgData = canvas.toDataURL('image/png') var img = new Image() 
 var contentWidth = canvas.width; var contentHeight = canvas.height;
 img.src = imgData; 
 $("#ECGReport").append(img); 
 img.width =1000; img.height = 740; 
 //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
 var imgWidth = 595.28;
 var imgHeight = 555.28/contentWidth * contentHeight; 
 //根据图片的尺寸设置pdf的规格,要在图片加载成功时执行,之所以要*0.5是因为比例问题 
 img.onload = function () { 
 //此处需要注意,pdf横置和竖置两个属性,需要根据宽高的比例来调整,不然会出现显示不完全的问题 
  var doc=''
 if (this.width > this.height) { 
   doc = new jsPDF('l','px', [1000, 720]) 
  } else {
   doc = new jsPDF('p','pt', [4000, 2960]) 
  }
  doc.addImage(imgData, 'png', 30, 40, 500, 360,'NONE') //比例可根据需要调节
 //根据下载保存成不同的文件名 doc.save('pdf_' + new Date().getTime() + '.pdf') };})

通过html2canvas的方法将canvas和表单内容提取出并转成图片,canvas内容不会丢失,为了防止图像内容失真严重,将原图内容放大倍数之后提取,放大倍数的计算可通过A4纸张的大小和打印机的分辨率300dpi等参数算出差不多为4倍,1920*1080的电脑屏幕dpi一般为72dpi,通过jsPDF的方法将图片导入到PDF文档中;

其实也可以通过jsPDF的方法去编辑报告单中的患者姓名等信息,同样canvas内容绘制逻辑也可以通过jsPDF的方法去实现,但是jsPDF对中文不支持需下载使用的 ttf字体文件到项目中,比较繁琐和不方便;缺点:虽实现大体需求,但是生成的波形图像还是有失真和锯齿现象,是canvas绘制中不可避免。

总结:

canvas的绘图严重依赖分辨率,如对svg操作比较熟悉的话,制图的保真问题比较看重,建议使用svg方法,svg是矢量图,不依赖于像素,无限放大也不会失真。如纯表单打印功能还比较容易实现连接打印机打印。

以上所述是小编给大家介绍的前端实现打印图像功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
Web前端绘制0.5像素的几种方法
Aug 11 HTML / CSS
多重CSS背景动画实现方法示例
Apr 04 HTML / CSS
CSS3的transition和animation的用法实例介绍
Aug 20 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
Jul 03 HTML / CSS
HTML5 解析规则分析
Aug 14 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
Jan 30 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
Dec 15 HTML / CSS
HTML5的新特性(1)
Mar 03 HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
Aug 17 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 HTML / CSS
H5离线存储Manifest原理及使用
Apr 28 HTML / CSS
html5 canvas绘制网络字体的常用方法
Aug 26 #HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
Aug 23 #HTML / CSS
HTML5语义化元素你真的用对了吗
Aug 22 #HTML / CSS
解决HTML5中滚动到底部的事件问题
Aug 22 #HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
Aug 20 #HTML / CSS
html5 canvas实现给图片添加平铺水印
Aug 20 #HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
Aug 16 #HTML / CSS
You might like
用PHP实现WEB动态网页静态
2006/10/09 PHP
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
2012/10/11 Javascript
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
2014/03/05 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
python的格式化输出(format,%)实例详解
2018/06/01 Python
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
用Python开发app后端有优势吗
2020/06/29 Python
Django model class Meta原理解析
2020/11/14 Python
.NET remoting中对象激活的两种方式
2015/06/08 面试题
大学生英语演讲稿
2014/04/24 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
国际贸易系求职信
2014/08/09 职场文书
要账委托书范本
2014/09/15 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
2015年元旦标语大全
2014/12/09 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
店铺转让协议书
2015/01/29 职场文书
详解Python中下划线的5种含义
2021/07/15 Python
Python各协议下socket黏包问题原理
2022/04/12 Python