Question

大家好，我有以下html，cc和js代码。我只能打印下表的可见部分。当更多的内容出现时，我已经使用css使表格可滚动并且用户可以滚动并查看表格中的所有数据。但是当我尝试打印时，我无法打印表格的全部内容。它总是在工作表中打印可见的部分。

下表在表格内部使用了引导程序3种样式。

    <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <div class="page-logo">
                                <a href="index.html">
                                    <img src="assets/layouts/layout3/img/Logo5.png" alt="logo">
                                </a>

                            </div>
                            <h5 class="modal-title" id="exampleModalLongTitle">Receipt Details</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">

                            <div id="printThis">
                                <div class="portlet-body">
                                    <div class="table-scrollable" style="height:170px;overflow:auto;">
                                        <table class="table table-hover">
                                            <thead>
                                                <tr>
                                                    <th> # </th>
                                                    <th>VOC ID </th>
                                                    <th>Plate No</th>
                                                    <th>Operation</th>
                                                    <th>Date & Time</th>
                                                    <th>Amount Paid </th>

                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td> 1 </td>
                                                    <td> 12345678 </td>
                                                    <td> AB 34567 </td>
                                                    <td>Modify </td>
                                                    <td>01/01/2018 12:34 PM</td>
                                                    <td> 10 OMR </td>

                                                </tr>
                                                <tr>
                                                    <td> 2 </td>
                                                    <td> 1245666 </td>
                                                    <td> YA 56789 </td>
                                                    <td>Modify </td>
                                                    <td>01/01/2018 12:34 PM</td>
                                                    <td> 10 OMR </td>

                                                </tr>                                           
 <tr>
                                                    <td> 4 </td>
                                                    <td> 73214666 </td>
                                                    <td> AA 45678 </td>
                                                    <td>Modify </td>
                                                    <td>01/01/2018 12:34 PM</td>
                                                    <td> 10 OMR </td>

                                                </tr>
    </tbody>
                                        </table>


                                    </div>
                                    <div class="pull-right"> Total Amount Paid: <b>45 OMR</b></div>
                                </div>
                            </div>
                            </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary" id="btnPrint">Print Details</button>
                        </div>
                    </div>
                </div>
            </div>

我要打印的CSS

<style>

        @media screen {
            #printSection {
                display: none;
            }
        }

        @media print {
            body * {
                visibility: hidden;
            }

            #printSection, #printSection * {
                visibility: visible;
            }

            #printSection {
                position: absolute;
                left: 0;
                top: 0;

            }
        }


    </style>

我的打印用js

<script language="javascript">

    document.getElementById("btnPrint").onclick = function () {
        printElement(document.getElementById("printThis"));

        window.print();
    }

    function printElement(elem) {
        var domClone = elem.cloneNode(true);

        var $printSection = document.getElementById("printSection");

        if (!$printSection) {
            var $printSection = document.createElement("div");
            $printSection.id = "printSection";
            document.body.appendChild($printSection);
        }

        $printSection.innerHTML = "";

        $printSection.appendChild(domClone);
    }

</script>

Answer 1

我更新的CSS，现在可以使用。我只是在“打印”中覆盖了高度。

<style>

        @media screen {
            #printSection {
                display: none;
            }
        }

        @media print {
            body * {
                visibility: hidden;

            }

            #printSection, #printSection * {
                visibility: visible;
                height: auto !important
            }

            #printSection {
                position: absolute;
                left: 0;
                top: 0;

            }
        }


    </style>

无法打印可滚动表格内容

1 个答案: