基于web的标签设计，打印工具，据称是web上的bartender ，超diao

怎么集成到你的项目中？
答：要集成这个工具，需要搞清楚的是两个页面：一个是你自己写的，称为调用页面（假设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');
}
});
});