前端实现打印图像功能


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 相关文章推荐
CSS3中background-clip和background-origin的区别示例介绍
Mar 10 HTML / CSS
CSS3实例分享--超炫checkbox复选框和radio单选框
Sep 01 HTML / CSS
CSS Grid布局教程之网格单元格布局
Dec 30 HTML / CSS
纯CSS3绘制打火机动画火焰效果
Jul 18 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
Dec 09 HTML / CSS
基于IE10/HTML5 开发
Apr 22 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 HTML / CSS
用HTML5制作数字时钟的教程
May 11 HTML / CSS
HTML5地理定位_动力节点Java学院整理
Jul 12 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
Aug 13 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 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
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
php jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
关于svn冲突的解决方法
2013/06/21 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
ThinkPHP 模板substr的截取字符串函数详解
2017/01/09 PHP
用javascript自动显示最后更新时间
2007/03/15 Javascript
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
jquery 关于event.target使用的几点说明介绍
2013/04/26 Javascript
在JS中如何调用JSP中的变量
2014/01/22 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
JS验证不重复验证码
2017/02/10 Javascript
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
Vue如何实现响应式系统
2018/07/11 Javascript
js 实现在2d平面上画8的方法
2018/10/10 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
python实现远程控制电脑
2019/05/23 Python
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
Python通过socketserver处理多个链接
2020/03/18 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
python中的错误如何查看
2020/07/08 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
2020/11/30 HTML / CSS
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
党的群众路线教育实践活动对照检查材料思想汇报
2014/09/19 职场文书
弘扬焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
优秀员工推荐材料
2014/12/20 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
活动宣传稿范文
2015/07/23 职场文书
MySQL索引是啥?不懂就问
2021/07/21 MySQL