通过（页面美观+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)
}