芥子打印组件升级---增加url打印

最新推荐文章于 2022-08-05 17:40:45 发布
最新推荐文章于 2022-08-05 17:40:45 发布
阅读量267 收藏
点赞数
文章标签： url  打印组件 支持html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/longxibo/article/details/89280015
版权

芥子打印组件升级—增加url打印

在BS 流行时代，到处充满网页。有时网页上有打印需求，但是打印模板跟网页不同，是另外一种格式。目前很多解决方案就是另外弄一个工具，定做一个打印模板，打印模板通常不是html格式。增加开发人员学习成本。是否可以直接使用html作为打印模板呢？
经过一段时间努力，芥子打印组件0.3 版实现了这个需求。虽然不是很完美。目前还是够用了。刚开始是用微软浏览器组件，但是这个东西有时不能用，后来没办法放弃了，直接解析html打印。当然离浏览器还有一段距离。毕竟时间那么短。有机会，弄谷歌浏览器组件来解析html就完美！这是后话，下面上代码，贴图。有图有真相。

下载芥子打印组件

下载芥子打印组件

打印url demo

下载后运行芥子打印组件，如何运行，参考前一篇文件芥子打印组件。双击testprintcomponent.html（最好用谷歌浏览器打开)，点击打印html按钮,如下图：
在这里插入图片描述

打印url js方法参数说明

html代码
<!DOCTYPE html>  

    <html>  

    <head>  

    <meta charset="utf-8">  

        <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>  
		<script type="text/javascript" src="printcomponent.js"></script>
    <script>  

    $(document).ready(function(){                
    
    function printCallback( success,message){
		if(success){
		  alert(message);
		}else{
		  alert(message);
		}
	}
	$("#but1").click(function(){  
         printHtml('127.0.0.1',1819,newGuid(),'https://jz-fw.com/jsp/printcomponent/prescription.html','FoxitReaderPDFPrinter',DMPAPER_A4,DMORIENT_LANDSCAPE,printCallback);

    });  

    $("#but2").click(function(){  

		var fileArray=new Array();
		 fileArray[0]="/root/pdf/1.pdf";
		 fileArray[1]="/root/pdf/2.pdf";
		// fileArray[2]="/root/pdf/3.pdf";
         
		 printSftpFiles('127.0.0.1',1819,newGuid(),'x.x.x.x',22,'user-name','xxxxxxxxxxxxxxx',fileArray,'FoxitReaderPDFPrinter'
		 ,DMPAPER_A4,DMORIENT_LANDSCAPE,130,printCallback);
		 
 

    });  

    $("#but3").click(function(){  

		var fileArray=new Array();
		 fileArray[0]="http://abcde.com/examples/pdf/QQSpider.pdf";
		 fileArray[1]="http://abcde.com/examples/pdf/www.datatables.pdf";
		// fileArray[2]="/root/pdf/3.pdf";
		 
		 printHttpFiles('127.0.0.1',1819,newGuid(),fileArray,'FoxitReaderPDFPrinter'
		 ,DMPAPER_A4,DMORIENT_LANDSCAPE,130,printCallback); 

    });  
  

      

    });  

    </script>  

    </head>  

    <body>  

      

    <div id="div1"><h2>芥子打印组件打印例子</h2></div>  

    
	<button id="but1">打印url</button> 
    <button id="but2">打印sftp pdf</button>  
	<button id="but3">打印http pdf</button>  
      

    </body>  

    </html>
js 方法

打开printcomponent.js 可以看到js方法:

//--打印网页
//参数说明:
//printComponentIp:打印组件服务器ip 默认为本机:127.0.0.1
//printComponentPort:打印组件服务器端口,默认为80
//id:每次命令请求id,以识别发的命令
//htmlUrl:网页url，即为需要打印网页的url
//pageSize：指定打印的页大小:A4等
//orientation：指定打印的页方向：横向或纵向
//callback	: 回调函数
//返回值:'1'---打印成功,'0'---打印失败
function printHtml(printComponentIp,printComponentPort,id,htmlUrl,printerName,pageSize,orientation,callback)

打印预览

这个版本的芥子打印组件，增加了url预览，支持在线的url预览和离线的本地html文件预览，操作如下图：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
上图演示了预览本地html，其实也可以预览某在线url，比如：https://jz-fw.com/jsp/printcomponent/prescription.html

url demo

上面的html内容如下：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>处方打印</title>
<script src="http://www.codefans.net/ajaxjs/jquery-1.4.2.min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

<script>
$(function(){
 $("div").click(function(){
$(this).addClass("select");        
    });
})
</script>
 
<style>
<!--
body{
    background-image:url(wood-bg2.jpg); 
    
     
     text-align: left;
 
     transform: scale(0.7,0.6) translate(-250px, -500px); 
     
}

 
#title{
    width:200px;
    margin:20px auto;
}
 
#title legend{
    font-size:26px;
}
 
div.exlist_title{
   
    width:680px;
    height:20px;
}
 
div.exlist_title img{
    float:right;
    margin:-15px 10px;
}
 
/*-----------form-----------*/
 
fieldset{
    width:90%;
    border:1px dashed #666;
    margin:40px auto;
}
  
legend{
    
    height:120px;
    height:30px;
    color:#630;
    font-weight:bolder;
    font-size:20px;
    line-height:30px;
    margin:-20px 10px 10px;
    padding:0 10px;
}
div.row{
    margin:10px;
    padding:5px;
}
  
div.row label{
    height:12px;
    font-size:20px;
    line-height:20px;
    margin:0 10px;
}
div.row.span{
   font-size:20px;
}
input.txt{
    
    color:#333;
    width:150px;
    height:20px;
    margin:0 10px;
    font-size:16px;
    line-height:20px;
    border:none;
    border-bottom:1px solid #565656;
}
  
input.txt:focus{
    color:#333;
   
    border-bottom:1px solid #F00;
}
  
select{
    width:100px;
}
 
option{
    text-align:left;
}
 
input.btn{
    width:50px;
    height:20px;
    color:#000008B;
   
    border:0;
    padding:0;
}
-->
</style>
</head>
<body >
<div style="width:600px;height:1500px;overflow:auto">
            <div style="margin-left:150px">
            
            
            <span style="font-size: 25px;font-weight: bold;">东直门中医院</span>
            
              <span style="font-size: 25px;font-weight: bold;">体检清单</span>
            
            </div>
            <div>----------------------------------------------------------------------------------------------------------</div>
                   <div class="row" style="margin-top: 5px">
                   <label style="font-weight: bold;font-size: 20px;text-align: bottom&wordbreak;height: 25px;width: 65px;">病历号:</label>
                   <span style="font-weight: bold; font-size: 20px;text-align: bottom&wordbreak;height: 25px;width: 130px;">99104783734</span>
                   </div>
                   <div class="row" style="margin-top: 5px">
                  <label style="font-weight: bold;font-size: 20px;text-align: bottom;height: 25px;width: 65px;">医保号:</label>
                   <span style="font-weight: bold; font-size: 20px;text-align: bottom;height: 25px;width: 65px;"></span>
                   </div>
                   <div class="row">
                    <label style="font-weight: bold;font-size: 20px;text-align: bottom;height: 35px;width: 65px;">姓名:</label>
                   <span style="font-weight: bold;font-size: 20px; text-align: bottom&wordbreak;height: 35px;width: 130px;">张三/ 男 / 44岁</span>    
                   </div>
                  
            <div>----------------------------------------------------------------------------------------------------------</div>
                    <div class="row">
                    <label style="font-weight: bold;font-size: 20px;text-align: left&wordbreak;height: 35px;width: 250px;">肝功能四项()(生化室)   15点后门诊大厅自助打印结果，10点后抽的血 16:30取结果尿10项或11项自动分析()(门诊化验) 半小时门诊大厅自助打印结果
                    </label>
                   </div>
            <div>----------------------------------------------------------------------------------------------------------</div>
            <div>----------------------------------------------------------------------------------------------------------</div>
                   <div class="row" style="margin-top: 5px">
                   <label style="font-weight: bold;font-size: 20px;text-align: bottom;height: 25px;width: 65px;">病历号:</label>
                   <span style="font-weight: bold; font-size: 20px;text-align: bottom;height: 25px;width: 130px;">99104783734</span>
                   </div>
                   <div class="row" style="margin-top: 5px">
                  <label style="font-weight: bold;font-size: 20px;text-align: bottom;height: 25px;width: 65px;">医保号:</label>
                   <span style="font-weight: bold; font-size: 20px;text-align: bottom;height: 25px;width: 65px;"></span>
                   </div>
                   <div class="row">
                    <label style="font-weight: bold;font-size: 20px;text-align: bottom;height: 35px;width: 65px;">姓名:</label>
                   <span style="font-weight: bold;font-size: 20px; text-align: bottom;height: 35px;width: 130px;">张三/ 男 / 44岁</span>        
                   </div>
                  <div class="row">
                    <label style="font-weight: bold;font-size: 20px;text-align: bottom;height: 35px;width: 200px;">电脑多导联心电图(心电图)</label>
                   </div>
            <div>----------------------------------------------------------------------------------------------------------</div>
            <div>----------------------------------------------------------------------------------------------------------</div>
                   <div class="row" style="margin-top: 5px">
                   <label style="font-weight: bold;font-size: 20px;text-align: bottom;height: 25px;width: 65px;">病历号:</label>
                   <span style="font-weight: bold; font-size: 20px;text-align: bottom;height: 25px;width: 130px;">99104783734</span>
                   </div>
                   <div class="row" style="margin-top: 5px">
                  <label style="font-weight: bold;font-size: 20px;text-align: bottom;height: 25px;width: 65px;">医保号:</label>
                   <span style="font-weight: bold; font-size: 20px;text-align: bottom;height: 25px;width: 65px;"></span>
                   </div>
                   <div class="row">
                    <label style="font-weight: bold;font-size: 20px;text-align: bottom;height: 35px;width: 65px;">姓名:</label>
                   <span style="font-weight: bold; font-size: 20px;text-align: bottom;height: 35px;width: 130px;">张三/ 男 / 44岁</span>        
                   </div>
                  <div class="row">
                    <label style="font-weight: bold;font-size: 20px;text-align: bottom;height: 35px;width: 200px;">胸片正位(体验)(X 光室)</label>
                   </div>
            <div>----------------------------------------------------------------------------------------------------------</div>
            <div>----------------------------------------------------------------------------------------------------------</div>
                   <div class="row" style="margin-top: 5px">
                   <label style="font-weight: bold;font-size: 20px;text-align: bottom;height: 25px;width: 65px;">病历号:</label>
                   <span style="font-weight: bold; font-size: 20px;text-align: bottom;height: 25px;width: 130px;">99104783734</span>
                   </div>
                   <div class="row" style="margin-top: 5px">
                  <label style="font-weight: bold;font-size: 20px;text-align: bottom;height: 25px;width: 65px;">医保号:</label>
                   <span style="font-weight: bold; font-size: 20px;text-align: bottom;height: 25px;width: 65px;"></span>
                   </div>
                   <div class="row">
                    <label style="font-weight: bold;font-size: 20px;text-align: bottom;height: 35px;width: 65px;">姓名:</label>
                   <span style="font-weight: bold; font-size: 20px;text-align: bottom;height: 35px;width: 130px;">张三/ 男 / 44岁</span>        
                   </div>
                  <div class="row">
                    <label style="font-weight: bold;font-size: 20px;text-align: bottom;height: 35px;width: 200px;">体检费(预防保健科)</label>
                   </div>
            <div>----------------------------------------------------------------------------------------------------------</div>            
</div>
<script type="text/javascript">
$(function(){
	  var date=new Date();
	   var hour=date.getHours();
	   var mintue=date.getMinutes();
	  var second = date.getSeconds();
	   if(mintue<10){
		   mintue="0"+date.getMinutes();
	   }
	   if(second<10){
		   second="0"+date.getSeconds();
	   }
	   var today=hour+":"+mintue;
       var printingTime=hour+":"+mintue+":"+second;
	  $("#aDate").val(today);
	  
	  $("#printingTime").text(printingTime);
});
 

</script>
</body>

</html>

结束语

芥子打印组件会不断完善，希望能解决程序开发人员打印方面的困扰！希望大家支持使用。然后不停完善使用过程中的问题。
打印url，不受语言限制，只要能访问url能返回html格式即可。但是目前是模拟浏览器解析html，然后“画”到打印机上。只是对部分html标签进行解析。不能解析引用class风格，执行js方法，解析引用css风格类。解析标签如下：

支持的标签列表
div
input
span
label
br
img
splitpage

【注】：splitpage 是一个扩展的标签，是用于翻页。一页内容放不下，加上这个标签就能“切”成两页

支持的控件属性
style
font-weight
font-size
font-family
width
height
colspan
align
src
type
text-align
value
margin-left
margin-top
class
id
padding-left
center
left
right
bottom
wordbreak

【注】：其中wordbreak 是扩展的字体对齐属性，用于字体自动换行，一段文字在一行里显示不完，自动折行显示。

longxibo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
nmf的matlab代码-sigprofilerjulia:芥子
05-26
nmf的matlab代码SigProfilerJulia SigProfilerJulia的目的是提取在肿瘤队列中活跃的突变过程。 在Julia中，这是用MATLAB编写的原始SigProfiler的快速实现。 此实现的原始动机是，我们没有MATLAB许可证来在本地集群中...
Lodopfuncs.js 网页打印操作
Khun_HWJ的博客
09-04 1136
第一步：在官网下载打印控件 下载打印控件 第二步：打开压缩文件，将这四个文件放到你的项目公共库中，其中压缩包中有很多示例可根据操作来 这里我用到的是固定大小的网页打印 写一个打印的静态html文件，如果数据需要后台生成，将网页布局写好，给后台生成一个网址，然后放到对应的js中。 1、引用静态文件： 2、引用实例中的方法函数，这里的方法会判断是否已安装打印控件，都会有相应的提示的 ，根据提示来就好了。 这里重点语句是 LODOP.ADD_PRINT_URL(0, 0, "100%", "100%", b
MFC中设置纸张方向
zqckzqck的专栏
10-01 833
在准备打印之前设置打印纸张的方向 CPrintInfo * PInfo; CDC * pDC; DEVMODE * dev = (LPDEVMODE)::GlobalLock(pInfo->m_pPD->m_pd.hDevMode); if(dev!=NULL) { dev->dmOrientation = DMORIENT_LANDSCAPE; pDC->ReSetDC(dev);
lodop处理样式及打印html节点、url地址、pdf
weixin_45288512的博客
07-19 1685
封装lodop，形成实例化。处理打印样式，读取页面样式及css文件写入打印，或者传入样式及样式文件；打印html节点、url地址页面、pdf。
html打印进度条不显示,LODOP打印URL显示和隐藏进度条
weixin_39973410的博客
06-16 632
不建议使用ADD_PRINT_URL:由于Lodop借用IE下载引擎，与非IE浏览器之间目前不能传递Session(Cookies)，所以需要安全验证的页面不要用URL方式打印，要用页面已经下载好的内容的HTM方式打印，也就是ADD_PRINT_HTM或ADD_PRINT_TABLE等语句另外URL方式需要二次访问服务器，理论上存在下载失败的可能，所以专业的管理系统尽量不要用URL方式。URL方式...
Lodopfuncs.js（打印插件）使用小记-springboot
热门推荐
lan_学习分享
08-21 1万+
这两天研究这打印的js插件，html上图：   下载地址：http://www.lodop.net/download.html 下载好后，里面比较重要的就是这几个文件，因为他需要一些插件的支持，所以exe有必要的情况下最好放在你网页可以下载的地方，然后修改其js的引用路径，这样当客户没有安装exe的时候，可以直接在页面上下载exe来安装，下载后的html估计都是些打印样板，具体不深究，这...
论文研究 - 卡梅利娜粉中的芥子油苷和西那平
05-31
Crantz）的成分在脱脂粕中的芥子油苷（GSL）和sinapine的含量。 这些抗营养化合物在用于动物饲养的山茶粉中是不可取的，因此我们显示出它们的差异性，从而可以为未来的育种计划确定最佳品种。 总GSL的范围为19.6至...
国画《芥子园画谱》谈中国传统美术设计-论文.zip
08-18
国画《芥子园画谱》谈中国传统美术设计-论文.zip
白芥子中脂溶性成分的气-质联用分析
01-06
白芥子中脂溶性成分的气-质联用分析，陈永新，李峰，目的：分析和鉴定白芥子中脂肪酸及其他脂溶性成分。方法：用索氏提取法提取白芥子中的脂溶性成分，进行甲酯化处理后，采用GC-MS技�
国画《芥子园画谱》谈中国传统美术设计修改-论文.zip
08-18
国画《芥子园画谱》谈中国传统美术设计修改-论文.zip
[原创]Lodop打印, 以及Lodop引用css文件控制打印样式的问题.
weixin_34199405的博客
04-26 4403
最近在做Lodop打印功能: 思路是:  用MasterPage搭个打印页面的框架, 然后在具体的页面中填入数据, 打印的样式由母版页和CSS来控制. 困扰了一天的问题是:  在打印的JS文件中, 引用外部css文件时, 需要拼出实际的含有IP地址的CSS文件地址, 并且需要用双斜杠(//)来代替单斜杠.   =====后来遇到的问题:  css文件里的样式, 在页面上显示没有问题, 但是...
delphi 获取打印机默认纸张_Delphi中如何控制打印方向，纸张大小等 | 学步园
weixin_39638708的博客
12-21 416
如何在程序里控制打印纸张大小(A3，A4)和打印方向？不想打开设置窗口---------------------------------------------------------------Uses Printer;.........procedure TForm1.Button1Click(Sender: TObject);varADevice, ADriv...
Lodop打印较大的超出纸张的图片
weixin_30532369的博客
12-04 869
ADD_PRINT_IMAGE打印图片时，如果一个图片过大，超出纸张，默认超出部分是不显示的，也不会分页。最近遇到有人利用ADD_PRINT_URL打印图片，说图片自动分了多页，因为这个方法一般是用来打印url网页的，所以我试验了一下用这个方法打印图片，结果图片超过高度确实自动分页了，应该说这个方法估计是把这个图片当作超文本来对待了。但是这不是标准的使用方法，如果只是打印图片，建议用ADD_PRI...
MFC 打印相关操作
weixinhum
12-29 3514
虽说现在已经有越来越多的人转向用C#来做界面的开发，但是对于一个习惯了C++这种半面向对象语言的人来说，MFC依然是难割舍的存在。最近在做些数据库相关的事，因为是数据库，自然离不开打印报表之类的东西，所以顺带的也去研究了下如何用MFC来进行打印相关的的操作。     本篇文章参考的比较多的是这篇文章和MSDN的示例代码，另外这篇文章也提供了很多有用的参考，如果想看原文的话可以去看看。
Pywin32操控Excel——3. 打印设置
JunChen681的博客
08-05 1003
pywin32之Excel打印设置
打印过程中修改打印机设置orientation等
哈哈的博客
05-19 5425
打印过程中修改page orientation的方法
grid-template-columns: repeat(4，1lf）
最新发布
04-24
这是一个CSS属性，用于定义网格布局中列的大小。其中，repeat(4, 1lf)指定将4个等宽的列放置在布局中。具体而言，1lf表示列的宽度为1个fr单位（即剩余可用空间的一部分），而repeat(4, 1lf)则表示重复这个规则4次。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值