芥子打印组件升级—增加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 是扩展的字体对齐属性,用于字体自动换行,一段文字在一行里显示不完,自动折行显示。