Jquery.Print实现表格打印

使用Jquery.Print.JS进行自定义表格打印，功能包含分页打印。

1、样式以及引用js

备注： 使用样式对页眉页脚进行隐藏

<style media="print">
        @@page {
            margin: 0mm auto;
            size: auto;
        }
    </style>

<link href="/css/word/sheets-of-paper.css" rel="stylesheet" />
    <link href="/css/word/sheets-of-paper-a4.css" rel="stylesheet" />
    <style>
        .table tbody tr:nth-child(odd) {
            background: none !important;
        }

        .table td {
            vertical-align: middle;
            height: 30px;
            padding: 5px 0;
            font-weight: 400 !important;
        }

        .table-bordered {
            border: 1px solid black !important;
            width: 98%;
        }

            .table-bordered td {
                border: 1px solid black !important;
            }

        .print-btn {
            position: absolute;
        }
    </style>
    <style media="print">
        @@page {
            margin: 0mm auto;
            size: auto;
        }
    </style>
    <script type="text/javascript" src="/lib/jquery/jQuery.print.js"></script>

2、使用

  备注：<div style="page-break-after:always;"></div>对后续内容进行强制分页

<div class="page">
    <div class="d-print-none print-btn"><a href="javascript:print1();" class="btn btn-primary"><i class="fa fa-print"></i></a></div>
        <div class="text-center">
            <h3>厦门市环境局</h3>
            <h3>委托检测业务审批单</h3>
        </div>
        <table class="table table-bordered text-center" style="border-collapse:collapse">
            <tr>
                <td rowspan="3">被委托单位信息</td>
                <td>单位名称</td>
                <td colspan="6">@enterprise.InstitutionName</td>
            </tr>
            <tr>
                <td>单位地址</td>
                <td colspan="6">@enterprise.Address</td>
            </tr>
            <tr>
                <td>联系人</td>
                <td colspan="2">@enterprise.Director</td>
                <td>电话</td>
                <td colspan="3">@enterprise.ContactTel</td>
            </tr>
            <tr>
                <td rowspan="3">受检单位信息</td>
                <td>单位名称</td>
                <td colspan="6">@enterprise.PSName</td>
            </tr>
            <tr>
                <td>单位地址</td>
                <td colspan="6">@enterprise.PSAddress</td>
            </tr>
            <tr>
                <td>联系人</td>
                <td colspan="2">@order.ContactUser</td>
                <td>电话</td>
                <td colspan="3">@order.ContactMobie</td>
            </tr>
            <tr>
                <td rowspan="@(2 + groupSampleCategory.Count())">监测要求</td>
                <td>委托监测日期</td>
                <td colspan="6">@enterprise.DetectionDate?.ToString("yyyy.MM.dd")</td>
            </tr>
            <tr>
                <td>样品类别</td>
                <td>检测项目</td>
                <td colspan="5">备注</td>
            </tr>            
            <tr>
                <td>项目经费估算</td>
                <td colspan="7">约@(totalPrice)元，实际以报账为准</td>
            </tr>
            <tr>
                <td colspan="2">分管领导</td>
                <td colspan="2">综合科</td>
                <td colspan="2">科室负责人</td>
                <td colspan="2">经办人</td>
            </tr>
            <tr>
                <td colspan="2" style="height: 70px;"></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
            </tr>
        </table>
        <div style="page-break-after:always;"></div>
</div>
<script>
    $(".sidebar-new").hide();
</script>
<script type="text/javascript">
    function print1() {
        $("#page").print({
            globalStyles: false,
            mediaPrint: true,
            iframe: true
        });
    }
</script>