一个基于 Lodop 的发运单打印 Demo

为什么80%的码农都做不了架构师？>>>   

主要基于 Lodop 组件，使用 jquery.tmpl 渲染数据，layer 信息提示

核心部分源码如下：

// 数据、打印组件初始化
$('#print-area').remove();
$('<div></div>').prop('id', 'print-area').hide().appendTo('body');
$("#tmpl_print").tmpl({data: result.retData}).appendTo('#print-area');
var strBodyStyle='<style>body { margin: 0; padding: 0; border: 0;} table tr { font-size: 12px; line-height: 20px; }' +
    'table.body  { border-bottom: 1px solid #666; border-right: 1px solid #666; } table.body th,table.body ' +
    'td { border-left: 1px solid #666; border-top: 1px solid #666; font-weight: normal; padding: 1px; }' +
    'table.body td { padding: 0 5px; } table.header tr, table.footer tr { font-size: 14px; } </style>';
LODOP = getLodop();
if (!LODOP) {
    return false;
}
LODOP.PRINT_INIT("");
LODOP.SET_PRINT_PAGESIZE(2,0,0,"A4"); // 横向打印
// LODOP.SET_PREVIEW_WINDOW(1,0,0,1000,600,""); // 初始预览窗口大小
LODOP.SET_SHOW_MODE("LANDSCAPE_DEFROTATED",1); // 横向打印时正向显示
LODOP.SET_SHOW_MODE("HIDE_PAPER_BOARD",1); // 去除背景滚动线
LODOP.SET_PRINT_MODE("AUTO_CLOSE_PREWINDOW",1); // 打印后自动关闭预览
LODOP.SET_PRINT_MODE("CUSTOM_TASK_NAME","发运单打印"); // 打印队列中的文档名

// 追加打印头部
LODOP.ADD_PRINT_TABLE(5,5,"100%",180,strBodyStyle + $('#print-header').html());
LODOP.SET_PRINT_STYLEA(0,"ItemType",1);

// 追加打印主体：分页、循环表格
LODOP.ADD_PRINT_TABLE(185,5,"100%",370, strBodyStyle + $('#print-body').html());
// LODOP.SET_PRINT_STYLEA(0,"Vorient",3);

// 追加打印底部
LODOP.ADD_PRINT_TABLE(570,5,"100%",150,strBodyStyle + $('#print-footer').html());
LODOP.SET_PRINT_STYLEA(0,"ItemType",1);
LODOP.SET_PRINT_STYLEA(0,"LinkedItem",2);

LODOP.NewPageA();

// 追加页码
LODOP.ADD_PRINT_HTM(745,5,"100%",15,$('#print-pages').html());
LODOP.SET_PRINT_STYLEA(0,"ItemType",1);
// LODOP.SET_PRINT_STYLEA(0,"LinkedItem",3);
LODOP.SET_PRINT_STYLEA(0,"Horient",1);

LODOP.PREVIEW();

完整 Demo 地址：https://github.com/whorusq/web-printer-with-Lodop

转载于:https://my.oschina.net/antsky/blog/819521