c_lodop升级打印(用户输入,打印自定义模版)

坚持不懈,才能有机会看到阳光大道!

通过(页面美观+js和lodop)来实现打印名片的功能

首先呢,咱们先把页面画出来(用bootstrap来实现)

c_lodop升级打印(用户输入,打印自定义模版)_第1张图片
页面效果

页面代码

//画一个盒子,长900px,宽600px, margin:100px auto 意思是这个盒子上边距100px,居中
//这个盒子是包含3个button,margin:30px 是4边的外边距都是30px,不是那么紧凑,美观一些。 //span标签的class 是显示图标
姓名
电话
公司
//用来显示下面的table

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 = $('');
             $(".SelectTableData").append(table);
             var caption = $('');
             table.append(caption);
             var thead = $('');
             var tr=$('')
             for (var th in head) {
                tr.append('');
            }
            thead.append(tr);
            var trs = $('');
            for (var item in model) {
                trs.append('');
                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)
}
c_lodop升级打印(用户输入,打印自定义模版)_第2张图片
预览效果

lodop最基础代码(如何配置,每行代码的意思,参数的意思):http://www.jianshu.com/p/265247973e44

一名职场菜鸟,希望大家多提提意见。

你可能感兴趣的:(c_lodop升级打印(用户输入,打印自定义模版))

打印信息
' + head[th] + '
' + model[item] + '