前端实现打印图像功能的命令,前端打印数据
前提：后台返回医用心电波形报告的数据，前端通过canvas在网页上绘制，然后打印，生成PDF文档！
一. 尝试LODOP打印插件
前端表单打印功能之前使用的是lodop打印插件，要安装相应的LODOP打印软件。有两种方法可以使用LODOP。第一种方法是将前端标记内容元素收集到对象var HTMLSTR=$ (# ECG Report )中。html()；通过洛多普。ADD _ PRINT _ HTM (20，60，400，900，html str)；Lodop方法导入到打印软件中，有自己的编辑器进行打印。当然，字体大小，颜色，粗体等。可以设置；二是自定义内容，模板样式已经确定，打印内容可以通过方法LODOP逐块放入打印区域。ADD _ PRINT _ HTM (20，60，400，900，生成报表标题)；并调整左右边距；但在使用第一种方法采集标签元素内容时，发现无法采集canvas中的图层样式和内容，果断放弃。如果网页中没有画布绘图内容，我可以使用。
优点：可以自定义打印内容和样式，打印百分比也可以编辑；缺点：需要下载安装打印lodop打印软件，页面画布内容无法提取到打印区域；
二. 尝试前端window.print()
优点：代码很好写，比如配合谷歌Chrome提供的打印功能，操作非常方便；
缺点：如果打印整页的一部分，打印区域不方便控制，有一些失真；
三.尝试html2canvas + jsPDF.js
html 2 can vas(document . query selector( # model contents )，{ allowTaint: true，taintTest: false，scale: 1 ，dpi: 300 ，Background: # fff})。然后(function(canvas){//元素id为exportcontentlet CTX=canvas . get context( 2d )；var img data=canvas . toda taurl( Image/png )var img=new Image()var content width=canvas . width；var content height=canvas . height；img.src=imgData$(#ECGReport )。追加(img)；img.width=1000img.height=740//a4纸的大小[595.28，841.89]，pdf中html页面生成的画布的宽度和高度=595.28；var img height=555.28/content width * content height；//根据图片大小设置pdf的规格。应该在图片加载成功后执行。之所以*0.5是因为比例问题img.onload=function () {//这里需要注意的是，pdf的横向和纵向两个属性需要根据宽高比进行调整。否则会出现显示不完整的问题var doc= if(this . width this . height){ doc=newjspdf( l ， px ，[1000，720])} else {doc=newjspdf (p ， pt ，[4000，260])} doc.addimage (imgdata， png ，30，40，500，360， none )//比例可以根据需要调整。//另存为不同的文件名doc.save (pdf _ new date()。Gettime()。 pdf })通过html2canvas提取画布和表单内容，并转化为图片。画布内容不会丢失。为了防止图像内容严重失真，放大后提取原始图像内容。放大倍数可以通过A4纸尺寸，打印机分辨率300dpi等参数计算，差不多是4倍。1920*1080电脑屏幕的DPI一般为72dpi，图片用jsPDF导入成PDF文档；
其实你可以用jsPDF编辑报告表单中的病人姓名等信息，画布内容绘制逻辑也可以用jsPDF实现。但是jsPDF不支持中文下载ttf字体文件到项目，繁琐不方便；缺点：虽然达到了一般要求，但生成的波形图像仍然失真，有锯齿，这在画布绘制中是不可避免的。
总结：
画布绘制很大程度上取决于分辨率。如果熟悉svg操作，绘图的保真度更重要。建议使用svg方法。svg是矢量图，不依赖像素，无限放大也不会失真。比如纯表格打印功能，用连接的打印机打印相对容易。
以上是边肖介绍的前端图像打印功能。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对网站的支持！
如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。