js控制浏览器web打印合同

浏览器打印，可以通过 window.print() 、document.execCommand(‘print’) 调用浏览器打印。

css样式代码

<style media="print">
/* 分页符 */
.print_gap{page-break-before: always;}
.print_gap .gap_line {height: 1px; background: #e5e5e5; margin: 40pt 0 30pt; }
@media print,screen {
    /* 去除页眉页脚 */
    /*size: a4 landscape横屏打印*/
    @page {margin: 0mm; size: a4; msn-header: none; msn-footer: none;}
    .noPrint {
        display: none;
    }
    /*A4的纸张是210*297mm*/
    /*A5的纸张是210*148.5mm*/
    /*小票的纸张是80mm*290mm*/
    /*小小票的纸张是58mm*210mm*/
    #print {font-size: 10px;}
    #print *{margin: 0;}
    #print .a4{padding:12.5mm;width:210mm;height:297mm}
    #print .a5{padding:12.5mm;width:210mm;height:148.5mm}
    #print .small{padding:3mm 68mm;width:80mm;height:290mm}
    #print .xsmall{padding:3mm 84mm;width:58mm;height:210mm}
    .print-page{font-size: 20px;text-align: center;font-weight: bold;margin-bottom: 10px;}    
    .print-page table{width: 100%;font-size:10px;}    
    .print-page table span{text-decoration:underline;font-size:10px;}
    .print-page table.table-box{border:1px solid #000000; border-collapse:collapse}
    .print-page table.table-box td{border:1px solid #000000; border-collapse:collapse}
    .print-page table.table-box thead td{text-align:center;}
}
</style>

HTML代码

<div style="display:none;">
<!--startprint-->
<div id="print">
    <div class="print-page a4">
        <div><p>商品采购清单</p></div>
        <div>
            <br>
                <table cellspacing="1" cellpadding="1">
                    <tbody>
                        <tr>
                            <td>合同名称：<span>{$detail.name}</span></td>
                            <td>合同编号：<span>{$detail.code}</span></td>
                            <td>联系人：<span>{$detail.customer_name}</span></td>
                        </tr>
                         <tr>
                            <td>供应商名称：<span>{$detail.supplier}</span></td>
                            <td>供应商地址：<span>{$detail.customer_address}</span></td>
                            <td>联系电话：<span>{$detail.customer_mobile}</span></td>
                        </tr>
                    </tbody>
                </table>
                <br>
        </div>
        <div>
            <div>
                <table cellspacing="0" cellpadding="1" class="table-box">
                    <thead>
                        <tr>
                            <td width="50%">商品名称</td>
                            <td width="20%">采购价格(元)</td>
                            <td width="10%">采购数量</td>
                            <td width="10%">单位</td>
                            <td width="10%">小计(元)</td>
                        </tr>
                    </thead>
                    <!-- 商品明细 -->
                    <tbody>
                            {empty name="$detail.list"}
                            <tr class="tr-none">
                                <td colspan="5">暂无商品信息</td>
                            </tr>
                            {else/}
                            {volist name="$detail.list" id="vo"}
                            <tr>
                                <td style="text-align:left;">{$vo.product_name}</td>
                                <td>{$vo.price}</td>
                                <td>{$vo.num}</td>
                                <td>{$vo.unit}</td>
                                <td>{$vo.amount}</td>
                            </tr>
                            {/volist}
                            {/empty}
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td>总金额:</td>
                            <td colspan="2">{$detail.cost}</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div>
                <br>
                <table cellspacing="1" cellpadding="1">
                    <tbody>
                        <tr>
                            <td>合同制定人：{$detail.prepared_name}</td>
                            <td>合同签定人：{$detail.sign_name}</td>
                            <td>合同签定日期：{$detail.sign_time}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<!--endprint-->
</div>

javascript代码

    function printView() {
        // 获取打印DOM
        let el = document.getElementById("print");
        // 当前页面样式
        let printStyle = document.querySelector('style[media="print"]');
        // 创建iframe
        let iframe = document.createElement("iframe");
        // 设置iframe样式
        iframe.setAttribute("id", "print-iframe");
        iframe.setAttribute("style","position:absolute;width:0px;height:0px;left:-999px;top:-999px;");
        // 在页面插入iframe
        document.body.appendChild(iframe);
        // 获取iframe内的html
        let doc = iframe.contentWindow.document;
        // 经需要打印的DOM插入iframe
        let printBody = document.createElement("div");
        printBody.setAttribute("id", "print");
        printBody.innerHTML = el.innerHTML;
        doc.body.appendChild(printBody);
        // 设置iframe内的header，添加样式文件
        doc.getElementsByTagName("head")[0].innerHTML = '<style>'+printStyle.innerHTML+'</style>';
        // 关闭iframe
        doc.close();
        // 使iframe失去焦点
        iframe.contentWindow.focus();
        // 调用iframe的打印方法
        iframe.contentWindow.print();
        // 移除iframe
        setTimeout(function(){
            document.body.removeChild(iframe);
        },500)

    }