浏览 12959 次
|
锁定老帖子 主题：基于web的标签设计，打印工具，超diao
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2014-02-26
最后修改：2014-02-26
Bartender 标签设计工具，也许你用过，很多终端用户也在用，但如果你是做客户的项目，客户要求在系统运行时，自己能够增加标签，可视化设计标签，并从自己的数据库里，提取数据进行打印，用 Bartender 有点力不从心了，毕竟那是 c/s风格的工具。
现在，有了一个在线标签工具，你可以利用它，方便地定制出让客户web设计、打印标签的功能。你可以在线体验这个工具 http://print.jatools.com/TOL/demo 可以用IE6-IE11,Firefox,Chrome,Safari,及相同内核浏览器。 可视化web设计标签。 允许用户在系统运行时，创建、修改标签。 有文本、图片、表格、线条等组件。 有一维码、二维码，包括code39、code128、2of5、postnet、ean-128、ean-13、ean-8、pdf417、datamatrix、qr code。 可以多行、多列标签打印。 与后台开发语言无关，也就是说，你可以使用j2ee,.net,php等等。 这里是部分界面： 
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2014-03-04
好东西，但没有介绍怎么用呢？
|
| 返回顶楼 | |
|
发表时间：2014-03-04
最后修改：2014-03-04
使用方法：
1. 安装打印控件。 如果你是ie,应该会弹出是否安装界面，你点安装，如果是chrome,firefox,会提示你下载jatoolsPrinter.exe,然后，你需要点击安装，然后，重启浏览器，就可以了。 2. 点"新增模板"，就可以创建一个新的标签模板。 3. 设置打印组件。 可以将工具栏上的文本，静态文本，表格，条形码，图片，和右侧的预定义组件，拖入设计面板中，相应地，会弹出属性对话框，进行设置。 4. 设点"页面设置"，置每页打印，多少行，多少列的标签。 5. 点"保存"，退出。 6. 此时可以"修改模板"，或者"打印预览"你刚才的模板。 |
| 返回顶楼 | |
|
发表时间：2014-03-04
最后修改：2014-03-04
怎么集成到你的项目中？
答：要集成这个工具，需要搞清楚的是两个页面：一个是你自己写的，称为调用页面（假设a.htm)，一个是工具本身提供的页面(jatoolsPrinterUI/index.htm)，前者通过 window.showModalDialog调用后者。 a.htm具体代码如下： var editingTemplate=null;// {pageBody:'<div>',styles:'',gridlayout:{}} null;
// 演示打印数据
var rowsData=[
['2FG3301','螺纹斜线细身Pt950铂金戒指','周大福','PT17446','戒指','深圳','1683.00','2.8',
'20140108'],
['2FG3302','圆榄珠千足金项链','周大福','F150863','戒指','深圳','2674.95','7.35','20140110'],
['2FG3303','光沙LUCKY黄金千足金手镯','中国黄金','F1489','手镯','香港','4407.46','12.58',
'20120410'],
['2FG3304','康熙福字千足金工艺金条','越王','F168836','工艺金条/金章','广州','325.00','1',
'20120221'],
['2FG3305','蝙蝠福袋千足金工艺金条','中国黄金','F21489','手镯','香港','4407.46','12.58',
'20120208'],
['2FG3306','康熙福，母之福”系列银镶珍珠吊坠','老凤祥','F1489','手镯','香港','4407.46','12.58',
'20120419'],
['2FG3307','光身925银珍珠吊坠','中国黄金','F1489','手镯','香港','4407.46','12.58',
'20120410'],
['2FG3308','水中花系列Pt950镶钻石耳钉','中国黄金','F1489','手镯','香港','4407.46','12.58',
'20120410'],
['2FG3309','别样心情10K金镶钻石耳环','老凤祥','F1489','手镯','香港','4407.46','12.58',
'20120410'],
['2FG3310','健康宝宝千足银投资银条','中国黄金','F1489','手镯','香港','4407.46','12.58',
'20120320'],
['2FG3311','镂空花形18K金镶珍珠（紫晶）项链','老凤祥','F1489','手镯','香港','4407.46','12.58',
'20120322'],
['2FG3312','LOVE白18K镶珍珠项链','中国黄金','F1489','手镯','香港','4407.46','12.58',
'20120414']];
var fields=['货号','品名','品牌','款号','款式','产地','单价','重量(克)','出厂日期'];
var dataForTest=[];
for(var i=0;i<rowsData.length;i++){
var row={};
for(var j=0;j<fields.length;j++){
row[fields[j]]=rowsData[i][j];
}
dataForTest.push(row);
}
// 将打印数据，填充到模板，并写到iframe中的document中，这部分可以自己实现，
function getDocument(styles/* 标签样式 */,html/* html模板 */,data/* 填充到模板的数据 */){
var htmls=[];
// 每个data项，就是一个标签
for(var i=0;i<data.length;i++){
var re=/\$\{(.*?)\}/g;
var ahtml=html.replace(re,function($0,$1){
if($1=='pageNo'){
// 替换pageNo,形成page1,page2,的div
return(i+1);
}else{
// 替换模板中的变量
return typeof(data[i][$1])!='undefined'?data[i][$1]:'';
}
});
htmls.push(ahtml);
}
// 生成一个完整的 document html文本
var fullhtml=[
'<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">',//
'<html>',//
'<head>',//
'<title>jatoolsPrinter打印</title>',//
'<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">',//
'<style>',styles,'</style>',//
'</head>',//
'<body>',//
htmls.join(),'</body>',//
'</html>']//
.join('\n');
// ******************************************
// 写入到iframe的document中
var $loader=$('#jp-for-print',document.body);
// 多次打印时，应避免多次创建iframe
if(!$loader.length)
$loader=$('<iframe id="jp-for-print" class="jp-html-loader"><iframe>');
$(document.body).append($loader);
var doc=$loader.contents()[0];
doc.open();
doc.writeln(fullhtml);
doc.close();
return doc;
}
$(function(){
$('#button-set').buttonset();
$('#button-set a').click(function(e){
var text=$(this).text();
if(text=='打印预览'){
// 请选择需要打印的快递单
if(!editingTemplate){
alert('先定义模板');
return;
}
var myDoc={
settings:editingTemplate.gridlayout.settings,
// 表示paperWidth,paperHeight,orientation,从page1的style上自动获取
documents:getDocument(editingTemplate.styles,editingTemplate.pageBody,
dataForTest),
marginIgnored:true,
enableScreenOnlyClass:true,
gridlayout:editingTemplate.gridlayout,
// settingsID:'test',
copyrights:'杰创软件拥有版权 www.jatools.com'
};
var jatoolsPrinter=navigator.userAgent.indexOf('MSIE')>-1?document
.getElementById('ojatoolsPrinter'):document
.getElementById('ejatoolsPrinter');
if(text=='打印'){
jatoolsPrinter.print(myDoc,true);
}else if(text=='打印预览'){
jatoolsPrinter.printPreview(myDoc);
}
}else{
editorSettings={
type:'user.design',
fields:[{
type:'label',
text:'+'
},{
type:'text',
text:'货号'
},{
type:'text',
text:'品名'
},{
type:'text',
text:'品牌'
},{
type:'text',
text:'款号'
},{
type:'text',
text:'款式'
},{
type:'text',
text:'产地'
},{
type:'text',
text:'重量(克)'
},{
type:'text',
text:'出厂日期'
},{
type:'barcode',
text:'货号',
display:'货号(条形码code128)',
codetype:'code128'
},{
type:'barcode',
text:'货号',
display:'货号(QR二维码)',
codetype:'qr'
}]
};
if(text=='修改模板'){
editorSettings.settingsID='test';
editorSettings.template=editingTemplate;// 为演示方便，此处模板数据直接从全局变量中取，实际项目中，可通过ajax从后台取得。
}
// 保存模板时，设计界面回调这个方法
// 参数说明：
// template:类似{styles:'jp-page:{position:....}',pageBody:'<div>...</div>'}
// settingsid,
// currentLayout，页面布局，包括每行列上的标签数，行列间距，左上位置，所有纸张大小
// 类似
// {
// colGap:5, // 间距定为5mm
// rowGap:5,
// rows:3,
// cols:3,
// left:3,
// top:2,
// settings:{paperWidth:2100,paperHeight:2970,portrait:true}
// };
//
editorSettings.saveTemplateCallback=function(template,settingsid,layout){
// 保存到变量中，以便点修改模板时，传到editorSettings.template中
editingTemplate={
pageBody:template.pageBody,
styles:template.styles,
gridlayout:layout
}
// 在此为演示方便，模板只保存到全局变量中实际项目中，应在此处调用ajax,保存到后台数据库中，例如：
// $.ajax({
// url:'saveTemplate.jsp',
// data:editingTemplate });
}
editorSettings.dataForTest=dataForTest;
window
.showModalDialog(
'../jatoolsPrinterUI/index.htm',
editorSettings,
'dialogWidth=1255px;dialogHeight=670px;status=no;help=no;scroll=no;resizable=yes');
}
});
});
|
| 返回顶楼 | |
|
发表时间：2014-03-04
最后修改：2014-03-04
总的思路是，设计页面只有html+css+js,，不负责保存模板和取得模板（这些，你需要通过ajax调用后台来实现），这样，就最大程度地，使这个标签工具适用于任何后台编程语言，如j2ee,.net,php等。
 此标签工具，已经成功应用在erp项目中，用于打印电器产品的出厂标签。
|
| 返回顶楼 | |
|
发表时间：2014-03-04
我能说非常牛吗？ 牛 牛牛牛。。。。。。
|
| 返回顶楼 | |
