lodop传统模板和文档式模板demo

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lodop设计测试</title>
</head>

<body>
  
    <textarea rows="10" id="S1" cols="98">返回的结果值</textarea><br>
    <p>从左到右依次点击</p>
    <button onclick="printDesign()">打印设计</button>
    <button onclick="printPreview()">打印预览</button>
    <button onclick="getProgramData()">文档式模板</button>
    <button onclick="getProgramDataAndPrint()">文档式模板打印</button>
    <button onclick="getOldProgramData()">传统模板</button>
    <button onclick="getOldProgramDataAndPrint()">传统模板打印</button>
</body>
<script src="js/lodop/LodopFuncs.js"></script>
<object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0>
    <embed id="LODOP_EM" type="application/x-print-lodop" width=0 height=0></embed>
</object>
<script src="http://localhost:8000/CLodopFuncs.js"></script>
<script>
    var LODOP; // 声明为全局变量
    LODOP = getLodop();

    var table1 = `<style> table,td,th {border: 1px solid black;border-style: solid;border-collapse: collapse;} table {border-left: none; border-right: none; border-top: none; border-bottom: none;}</style>
<table border="1" width="435px">
<tr>
  <td>商品</td>
  <td>属性</td>
  <td>数量</td>
  <td>金额</td>
</tr>
<tr>
  <td><font color="#FF0000">Double click me and modify...</font></td>
  <td>Demo data3</td>
  <td>Demo data3</td>
  <td>Demo data3</td>
</tr>
</table>`;


    var table2 = `<style> table,td,th {border: 1px solid black;border-style: solid;border-collapse: collapse;text-align:center;} td{height:25px;}</style>
<table border="1" width="430px">
<tr>
  <td>产品</td>
  <td>尺码问题</td>
  <td>质量问题</td>
  <td>退or换</td>
  <td>原因</td>
</tr>
<tr>
  <td></td>
  <td> </td>
  <td> </td>
  <td> </td>
  <td> </td>
</tr>
</table>`;

    function createPage() {
        LODOP.PRINT_INITA(0,0,700,500,"打印");
      
        LODOP.ADD_PRINT_TEXTA("OBJ_TITLE", 33, 214, 130, 20, "销售单");
        LODOP.ADD_PRINT_TEXT(37, 393, 100, 20, "NO.");
        LODOP.ADD_PRINT_TEXT(77, 98, 100, 20, "打印时间:");
        LODOP.ADD_PRINT_TEXT(104, 96, 100, 20, "订单号:");
        LODOP.ADD_PRINT_TEXT(128, 95, 100, 20, "买家旺旺:");
        LODOP.ADD_PRINT_TEXT(180, 353, 100, 20, "买家姓名:");
        LODOP.ADD_PRINT_TEXT(156, 95, 100, 20, "收货地址:");
        LODOP.ADD_PRINT_TEXT(181, 95, 100, 20, "手机电话:");
        LODOP.ADD_PRINT_SHAPE(4, 211, 92, 435, 25, 0, 1, "#000000");
        LODOP.ADD_PRINT_TEXT(218, 264, 100, 20, "发货信息");
        LODOP.SET_PRINT_STYLEA(0, "FontColor", "#FFFFFF");
        LODOP.ADD_PRINT_TABLE(258, 92, 426, 86, table1);
        LODOP.ADD_PRINT_TEXT(335, 96, 100, 20, "总数量:");
        LODOP.ADD_PRINT_TEXT(365, 96, 100, 20, "总金额:");
        LODOP.ADD_PRINT_SHAPE(4, 391, 99, 428, 25, 0, 1, "#000000");
        LODOP.ADD_PRINT_TEXT(396, 264, 100, 20, "退换货信息");
        LODOP.SET_PRINT_STYLEA(0, "FontColor", "#FFFFFF");
        LODOP.ADD_PRINT_TEXT(419, 99, 69, 22, "订单编号:");
        LODOP.ADD_PRINT_TEXT(421, 320, 100, 20, "买家旺旺:");
        LODOP.ADD_PRINT_TEXT(437, 98, 100, 20, "买家姓名:");
        LODOP.ADD_PRINT_TEXT(443, 319, 100, 20, "买家电话:");
        LODOP.ADD_PRINT_TABLE(470, 87, 441, 70, table2);
        LODOP.ADD_PRINT_TEXT(528, 250, 278, 18, "(如需退换货请随包裹寄回此单,可优先处理)");
        LODOP.ADD_PRINT_HTM(558, 89, 100, 20, "<div><span tdata='pageNO'>第##页</span><span tdata='pageCount'>共##页</span></div>");
          LODOP.SET_PRINT_STYLEA(0, "FontName", "黑体");
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 10);
        LODOP.ADD_PRINT_TEXT(561, 317, 100, 20, "打印时间:");
        LODOP.SET_PRINT_STYLEA(0, "FontName", "黑体");
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 10);
        LODOP.ADD_PRINT_TEXT(416, 163, 100, 20, "_____________");
        LODOP.ADD_PRINT_TEXT(441, 162, 100, 20, "_____________");
        LODOP.ADD_PRINT_TEXT(421, 382, 100, 20, "_____________");
        LODOP.ADD_PRINT_TEXT(446, 381, 100, 20, "_____________"); 

        LODOP.ADD_PRINT_TEXTA("OBJ_PRINT_TIME", 77, 167, 176, 21, "OBJ_PRINT_TIME");
        LODOP.ADD_PRINT_TEXTA("OBJ_ORDER_NUM", 105, 165, 182, 24, "OBJ_ORDER_NUM");
        LODOP.ADD_PRINT_TEXTA("OBJ_BUYER_WW", 127, 165, 184, 22, "OBJ_BUYER_WW");
        LODOP.ADD_PRINT_TEXTA("OBJ_PHONE_NUM", 181, 165, 176, 18, "OBJ_PHONE_NUM");
        LODOP.ADD_PRINT_TEXTA("OBJ_BUYER_NAME", 181, 414, 100, 20, "OBJ_BUYER_NAME");
        LODOP.ADD_PRINT_TEXTA("OBJ_SERIAL_NUM", 30, 417, 100, 20, "OBJ_SERIAL_NUM");
        LODOP.ADD_PRINT_TEXTA("OBJ_ADDRESS", 156, 162, 353, 22, "OBJ_ADDRESS");
        LODOP.ADD_PRINT_TEXTA("OBJ_PRINT_TIME", 560, 387, 100, 20, "OBJ_PRINT_TIME");
    }

    // 打印设计
    function printDesign() {
        createPage()
        LODOP.SET_SHOW_MODE("DESIGN_IN_BROWSE", 1);

        LODOP.PRINT_DESIGN()
    }
    // 打印预览
    function printPreview() {
        createPage()
        var obj = {
            "OBJ_TITLE": "店铺名称",
            "OBJ_PRINT_TIME": "打印时间",
            "OBJ_ORDER_NUM": "订单号码",
            "OBJ_BUYER_WW": "旺旺号码",
            "OBJ_PHONE_NUM": "手机号码",
            "OBJ_BUYER_NAME": "买家名称",
            "OBJ_SERIAL_NUM": "序列号",
            "OBJ_ADDRESS": "收货地址"
        }

        var keys = Object.keys(obj);
        for (var i in keys) {
            LODOP.SET_PRINT_STYLEA(keys[i], "CONTENT", obj[keys[i]])
        }
        LODOP.SET_PRINT_STYLEA("OBJ_TITLE", "CONTENT", obj.OBJ_TITLE + "销售单")
        LODOP.PREVIEW()
    }
    // 获取模板数据--文档式模板
    function getProgramData() {
        LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
        if (LODOP.CVERSION) LODOP.On_Return = function (TaskID, Value) {
            document.getElementById('S1').value = Value;
        };
        document.getElementById('S1').value = LODOP.GET_VALUE("ProgramData", 0); //获得文档式模板
    }

    function getProgramDataAndPrint() {
        var template = document.getElementById('S1').value  //获得文档式模板
        LODOP.ADD_PRINT_DATA("ProgramData",template);       // 设置模板
        var obj = {
            "OBJ_TITLE": "店铺名称",
            "OBJ_PRINT_TIME": "打印时间",
            "OBJ_ORDER_NUM": "订单号码",
            "OBJ_BUYER_WW": "旺旺号码",
            "OBJ_PHONE_NUM": "手机号码",
            "OBJ_BUYER_NAME": "买家名称",
            "OBJ_SERIAL_NUM": "序列号",
            "OBJ_ADDRESS": "收货地址"
        }

        var keys = Object.keys(obj);
        for (var i in keys) {
            LODOP.SET_PRINT_STYLEA(keys[i], "CONTENT", obj[keys[i]])
        }
        LODOP.SET_PRINT_STYLEA("OBJ_TITLE", "CONTENT", obj.OBJ_TITLE + "销售单")
        LODOP.PREVIEW()
    }

    // 获取传统模板
    function getOldProgramData() {
        createPage()
        LODOP.PRINT_DESIGN()
        if (LODOP.CVERSION) CLODOP.On_Return = function (TaskID, Value) {
            document.getElementById('S1').value = Value;
        };
        document.getElementById('S1').value = LODOP.PRINT_SETUP();  // 打印维护返回代码
    }

    function getOldProgramDataAndPrint(){
        eval(document.getElementById('S1').value);
        var obj = {
            "OBJ_TITLE": "店铺名称",
            "OBJ_PRINT_TIME": "打印时间",
            "OBJ_ORDER_NUM": "订单号码",
            "OBJ_BUYER_WW": "旺旺号码",
            "OBJ_PHONE_NUM": "手机号码",
            "OBJ_BUYER_NAME": "买家名称",
            "OBJ_SERIAL_NUM": "序列号",
            "OBJ_ADDRESS": "收货地址"
        }

        var keys = Object.keys(obj);
        for (var i in keys) {
            LODOP.SET_PRINT_STYLEA(keys[i], "CONTENT", obj[keys[i]])
        }
        LODOP.SET_PRINT_STYLEA("OBJ_TITLE", "CONTENT", obj.OBJ_TITLE + "销售单")
        LODOP.PREVIEW()
    }
</script>

</html>

 

posted @ 2020-05-26 11:55  闲一话  阅读(873)  评论(0编辑  收藏  举报