JQprint在线打印

最新推荐文章于 2021-03-18 04:17:38 发布

原创最新推荐文章于 2021-03-18 04:17:38 发布 · 427 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#打印在线

Js 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍使用JQprint插件实现在线打印功能的方法。通过引入jQuery和JQprint脚本，设置打印页面格式，填充数据，并调用打印方法，实现自定义报表的打印输出。

JQprint在线打印。调用浏览器打印功能

引用：

<script type="text/javascript"
        src="<%=request.getContextPath()%>/rlgl_new/common/jquery-1.4.4.min.js?_ver=<%=SystemConfig.get("project.version")%>"></script>

<script type="text/javascript"
        src="<%=request.getContextPath()%>/rlgl_new/common/jquery.jqprint-0.3.js?_ver=<%=SystemConfig.get("project.version")%>"></script>

打印部分，画打印页面格式

<div id="printZssj" style="display: none;border: solid 1px black;" cellpadding="0" cellspacing="0">
    <table width="100%" height="150" cellpadding="0" cellspacing="0">
        <tr>
            <td width="100%" colspan="9" align="center">
                <strong><%=SystemConfig.get("push.client.name")%>称重明细表</strong>
            </td>
        </tr>
        <tr>
            <td colspan="4" align="left" style="border-bottom: solid 1px black;">
                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                时间：<span id="p_beg"/> 至 <span id="p_end"/>
            </td>

            <td align="right" style="border-bottom: solid 1px black;">编号：</td>
            <td colspan="2" align="left" style="border-bottom: solid 1px black;">
                <span id="p_bh"/>
            </td>
            <td colspan="2" align="center" style="border-bottom: solid 1px black;">单位：吨/车</td>
        </tr>
        <tr style="border-bottom: solid 1px black;border-left: solid 1px black;">
            <td width="20%" style="border-bottom: solid 1px black;text-align:center">序号</td>
            <td width="10%"
                style="border-bottom: solid 1px black;border-left: solid 1px black;text-align:center">车号
            </td>
            <td width="10%"
                style="border-bottom: solid 1px black;border-left: solid 1px black;text-align:center">品种
            </td>
            <td width="10%"
                style="border-bottom: solid 1px black;border-left: solid 1px black;text-align:center">供应商
            </td>
            <td width="10%"
                style="border-bottom: solid 1px black;border-left: solid 1px black;text-align:center">煤矿
            </td>
            <td width="10%"
                style="border-bottom: solid 1px black;border-left: solid 1px black;text-align:center">毛重
            </td>
            <td width="10%"
                style="border-bottom: solid 1px black;border-left: solid 1px black;text-align:center">皮重
            </td>
            <td width="10%"
                style="border-bottom: solid 1px black;border-left: solid 1px black;text-align:center">净重
            </td>
            <td width="10%"
                style="border-bottom: solid 1px black;border-left: solid 1px black;text-align:center">票重
            </td>
        </tr>
    </table>
    <div id="table_data"></div>
</div>

数据填充：

function printZssj() {
    document.getElementById('printZssj').style.display = 'block';
    var items = truck_zssj_gridpanelUiIns.getStore().data.items; //获取数据，json xml 任意类型，然后填充html
    if (items.length <= 0) {
        Ext.MessageBox.alert('警告', '没有可打印的记录！');
    } else {
        var tab = '<table border=0 width="100%">';
        var date_beg = Ext.getCmp('date_begin').getValue();
        var date_end = Ext.getCmp('date_end').getValue();
        $("#p_beg").html(date_beg);
        $("#p_end").html(date_end);
        for (var i = 0; i < items.length; i++) {
            var rec = items[i];
            if (rec.get("dbid") == '') {
                tab += '<tr>';
                tab += '<td colspan="5" align="center" style="border-bottom: solid 1px black"><br>总计：共' + (items.length - 1) + '车<br><br></td>';
                tab += '<td colspan="1" align="center" style="border-bottom: solid 1px black;border-left: solid 1px black">' + rec.get("mz") + '</td>';
                tab += '<td colspan="1" align="center" style="border-bottom: solid 1px black;border-left: solid 1px black">' + rec.get("pz") + '</td>';
                tab += '<td colspan="1" align="center" style="border-bottom: solid 1px black;border-left: solid 1px black">' + rec.get("jzl") + '</td>';
                tab += '<td colspan="1" align="center" style="border-bottom: solid 1px black;border-left: solid 1px black">' + rec.get("ysl") + '</td>';
                tab += '</tr>';
            } else {
                tab += '<tr style="border-bottom: solid 1px black;border-left: solid 1px black;">';
                tab += '<td width="20%" style="border-bottom: solid 1px black;text-align:center">' + (i + 1) + '</td>';
                tab += '<td width="10%" style="border-bottom: solid 1px black;border-left: solid 1px black;text-align:center">' + rec.get("ch") + '</td>';
                tab += '<td width="10%" style="border-bottom: solid 1px black;border-left: solid 1px black;text-align:center">' + rec.get("mzmc") + '</td>';
                tab += '<td width="10%" style="border-bottom: solid 1px black;border-left: solid 1px black;text-align:center">' + rec.get("gysmc") + '</td>';
                tab += '<td width="10%" style="border-bottom: solid 1px black;border-left: solid 1px black;text-align:center">' + rec.get("kbmc") + '</td>';
                tab += '<td width="10%" style="border-bottom: solid 1px black;border-left: solid 1px black;text-align:center">' + rec.get("mz") + '</td>';
                tab += '<td width="10%" style="border-bottom: solid 1px black;border-left: solid 1px black;text-align:center">' + rec.get("pz") + '</td>';
                tab += '<td width="10%" style="border-bottom: solid 1px black;border-left: solid 1px black;text-align:center">' + rec.get("jzl") + '</td>';
                tab += '<td width="10%" style="border-bottom: solid 1px black;border-left: solid 1px black;text-align:center">' + rec.get("ysl") + '</td>';
                tab += '</tr>'
            }
        }
        tab += '<tr>';
        tab += '<td colspan="1" align="center"><br><br><br></td>';
        tab += '<td colspan="1" align="left" >审核：</td>';
        tab += '<td colspan="3" align="center" ></td>';
        tab += '<td colspan="1" align="left" >司磅员：</td>';
        tab += '<td colspan="3" align="center" ></td>';
        tab += '</tr>';
        tab += '</table>';
        document.getElementById('table_data').innerHTML = tab;
        $("#printZssj").jqprint();   //调用打印方法，
    }
}