介绍
本篇文章给大家分享的是有关怎么在前端中实现一个打印图像功能,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
<强>一只;尝试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, & # 39;生成报告标题& # 39;);并调节左右边距;但是使用第一种方式收集标签元素内容时候,发现不能收集到画布里面的图层样式和内容,并果断放弃,如果网页无帆布绘制内容,可使用;
优点:可自定义打印内容和样式,打印百分比也可以编辑;缺点:需下载安装打印lodop打印软件,页面帆布的内容无法提取到打印区域;
<强>二。尝试前端window.print()
优点:代码编写方便,如配合谷歌浏览器提供的打印功能,操作很方便;
缺点:如整页有部分是打印内容,打印区域不方便控制,有一定失真;
<强>三。尝试html2canvas + jsPDF。js
html2canvas (document.querySelector (& # 39; # modelContents& # 39;),, {
,,,allowTaint:真的,,污染:,假,,:,& # 39;1 & # 39;,,dpi:, & # 39; 300 & # 39;,,背景:,& # 39;# fff& # 39;}
),不要犹豫(函数(画布),{,,//元素id为exportContent
,let ctx =canvas.getContext (“2 d");,
,var imgData =, canvas.toDataURL(& # 39;图像/png # 39;), var img =, new 图像(),
,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页面生成的画布在pdf中图片的宽高
,var imgWidth =, 595.28;
,var imgHeight =, 555.28/contentWidth *, contentHeight;,
,//根据图片的尺寸设置pdf的规格,要在图片加载成功时执行,之所以要* 0.5是因为比例问题,=,,img.onload function (), {,
,//此处需要注意,pdf横置和竖置两个属性,需要根据宽高的比例来调整,不然会出现显示不完全的问题,
var 才能;医生=& # 39;& # 39;
,if (this.width 祝辞,this.height), {,
,,doc =, new jsPDF (& # 39; l # 39; & # 39; px # 39;,, (1000,, 720)),
,,},{else
,,doc =, new jsPDF (& # 39; p # 39; & # 39; pt # 39;,, (4000,, 2960)),
,,}
doc.addImage才能(imgData, & # 39; png # 39;,, 30岁,40岁,500年,360年,& # 39;没有# 39;),//比例可根据需要调节
,//根据下载保存成不同的文件名,doc.save (& # 39; pdf_& # 39;, +, new 日期().getTime (), +, & # 39; . PDF # 39;),};}) 通过html2canvas的方法将画布和表单内容提取出并转成图片,帆布内容不会丢失,为了防止图像内容失真严重,将原图内容放大倍数之后提取、放大倍数的计算可通过A4纸张的大小和打印机的分辨率300 dpi等参数算出差不多为4倍,1920 * 1080的电脑屏幕dpi一般为72 dpi,通过jsPDF的方法将图片导入到PDF文档中;
其实也可以通过jsPDF的方法去编辑报告单中的患者姓名等信息,同样帆布内容绘制逻辑也可以通过jsPDF的方法去实现,但是jsPDF对中文不支持需下载使用的ttf字体文件到项目中,比较繁琐和不方便;缺点:虽实现大体需求,但是生成的波形图像还是有失真和锯齿现象,是帆布绘制中不可避免。
以上就是怎么在前端中实现一个打印图像功能,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。
