坚持不懈，才能有机会看到阳光大道！
通过（页面美观+js和lodop）来实现打印名片的功能
首先呢，咱们先把页面画出来（用bootstrap来实现）
页面效果
页面代码
<div style="border: 1px solid #269ABC; width: 900px; height: 600px; margin: 100px auto">//画一个盒子，长900px,宽600px， margin:100px auto 意思是这个盒子上边距100px,居中
<div class="btn-group" style="margin: 30px;">//这个盒子是包含3个button,margin:30px 是4边的外边距都是30px,不是那么紧凑，美观一些。
<button class="btn btn-default" id="addData"><span class="glyphicon glyphicon-plus"> 添加数据</span></button>//span标签的class 是显示图标
<button class="btn btn-default" id="preview"><span class="glyphicon glyphicon-eye-open"> 打印预览</span></button>
<button class="btn btn-default" id="startPrint"><span class="glyphicon glyphicon-print"> 开始打印</span></button>
</div>
<div class="panel panel-info col-md-11" id="Data" style="margin: 30px;">
<div class="input-group" style="padding: 10px;">
<span class="input-group-addon">姓名</span>
<input type="text" class="form-control" placeholder="请输入名称" id="UserName" name="UserName">
</div>
<div class="input-group" style="padding: 10px;">
<span class="input-group-addon">电话</span>
<input type="text" class="form-control" placeholder="请输入电话" id="phone" name="phone">
</div>
<div class="input-group" style="padding: 10px;">
<span class="input-group-addon">公司</span>
<input type="text" class="form-control" placeholder="请输入公司" id="companyName" name="companyName">
</div>
<input type="button" class="btn btn-default col-md-3 col-md-offset-2" id="close" value="关 闭">
<input type="button" class="btn btn-default col-md-3 col-md-offset-2" id="sure" value="保 存">
</div>
<div class="SelectTableData" id="SelectTableData"></div>//用来显示下面的table
</div>
bootstrap组件(图标) : http://v3.bootcss.com/components/
js代码
var model={user:'',phone:'',companyName:''}//用来保存填写的数据
var head=['用户名','手机号码','公司名称']//生成table表头
//点击保存给model赋值，
$("#sure").bind("click",function(){
model = {};//初始化model,是为了防止多次保存，有多余数据
model.user = $("#UserName").val();
model.phone = $("#phone").val();
model.companyName = $("#companyName").val();
//这里需要判断一下是否已经存在表格，如果存在清空
if ($("tr th").length > 0) {
//清空表格
document.getElementById("SelectTableData").innerText = "";
creatTable(model,head);//生成table函数
} else {
creatTable(model,head);//生成table函数
}
})
//创建table,(model是数据源，head是表头)
function creatTable(model,head){
var table = $('<table class="table table-hover table-striped table-bordered">');
$(".SelectTableData").append(table);
var caption = $('<caption style="text-align:center;">打印信息</caption>');
table.append(caption);
var thead = $('<thead></thead>');
var tr=$('<tr></tr>')
for (var th in head) {
tr.append('<th>' + head[th] + '</th>');
}
thead.append(tr);
var trs = $('<tr></tr>');
for (var item in model) {
trs.append('<td>' + model[item] + '</td>');
thead.append(trs);
}
table.append(thead);
}
lodop代码
$("#preview").bind("click",function(){
//预览
LODOP = getLodop();
printInfo(model);
LODOP.PREVIEW();
})
$("#startPrint").bind("click",function(){
//打印
LODOP = getLodop();
printInfo(model);
LODOP.PRINT();
})
function printInfo(model){
LODOP.PRINT_INIT("打印测试");
LODOP.SET_PRINT_PAGESIZE(0, "90mm","50mm","");
LODOP.ADD_PRINT_LINE("10mm", "5mm", "10mm", "85mm", 0, 1);
LODOP.ADD_PRINT_LINE("10mm", "5mm", "40mm", "5mm", 0, 1);
LODOP.ADD_PRINT_LINE("10mm", "85mm", "40mm", "85mm", 0, 1);
LODOP.ADD_PRINT_LINE("40mm", "5mm", "40mm", "85mm", 0, 1);
LODOP.ADD_PRINT_TEXT("12mm", "45mm", "80mm", "8mm", model.user);
LODOP.SET_PRINT_STYLEA(0,"FontName", "方正姚体");//FontName设置字体为宋体
LODOP.SET_PRINT_STYLEA(0,"FontSize", 20);//FontSize设置字体大小(单位是：pt)
LODOP.SET_PRINT_STYLEA(0,"Bold", 1);//Bold：设定纯文本打印项是否粗体 （1是粗体，0不是粗体）。
LODOP.ADD_PRINT_TEXT("22mm", "45mm", "80mm", "8mm", model.phone);
LODOP.SET_PRINT_STYLEA(0,"FontName", "方正姚体");//FontName设置字体为宋体
LODOP.SET_PRINT_STYLEA(0,"FontSize", 20);//FontSize设置字体大小(单位是：pt)
LODOP.SET_PRINT_STYLEA(0,"Bold", 1);//Bold：设定纯文本打印项是否粗体 （1是粗体，0不是粗体）。
LODOP.ADD_PRINT_TEXT("32mm", "45mm", "80mm", "8mm", model.companyName);
LODOP.SET_PRINT_STYLEA(0,"FontName", "方正姚体");//FontName设置字体为宋体
LODOP.SET_PRINT_STYLEA(0,"FontSize", 20);//FontSize设置字体大小(单位是：pt)
}
预览效果
