Question

我使用jquery创建一个模态并使其可打印但我无法弄清楚如何打印完整的模态体。它只打印一部分。我尝试使用内联分页符（我在另一篇文章中看到）与jquery每隔几个div，但它不起作用。有人有同样的问题吗？我想要一些帮助

这是我使用的css，我从另一篇文章中找到了

的CSS：

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

    body.modalprinter .modal-dialog.focused {
        position: absolute;
        padding: 0;
        margin: 0;
        left: 0;
        top: 0;
    }

    body.modalprinter .modal-dialog.focused .modal-content {
        border-width: 0;
    }

    body.modalprinter .modal-dialog.focused .modal-content .modal-header .modal-title,
    body.modalprinter .modal-dialog.focused .modal-content .modal-body,
    body.modalprinter .modal-dialog.focused .modal-content .modal-body * {
        visibility: visible;
    }

    body.modalprinter .modal-dialog.focused .modal-content .modal-header,
    body.modalprinter .modal-dialog.focused .modal-content .modal-body {
        padding: 0;
    }

    body.modalprinter .modal-dialog.focused .modal-content .modal-header .modal-title {
        margin-bottom: 20px;
    }
}

随之而来的jquery

jquery的：

    $('.modal.printable').on('shown.bs.modal', function () {
        $('.modal-dialog', this).addClass('focused');
        $('body').addClass('modalprinter');

        if ($(this).hasClass('autoprint')) {
            window.print();
        }
    }).on('hidden.bs.modal', function () {
        $('.modal-dialog', this).removeClass('focused');
        $('body').removeClass('modalprinter');
    });

我在html中创建模态，模态体为空，在打印按钮上我使用onClick（）模态体从jquery填充，其内容不总是相同

<div class='modal fade printable ' id='myModal'>
    <div class='modal-dialog modal-lg'>
        <div class='modal-content'>
            <div class='modal-header'>

                <div class="row">
                    <div class="col-md-5"><h3 class='modal-title'>Firma etairias</h3></div>
                    <div class="col-md-1"></div>
                    <div class="col-md-4"><h4 class=" text-right" id="modal_cust"><span class="small">Πελατης: </span><span id="modal_cust"> </span></h4></div>
                    <div class="col-md-2"><button class='close' data-dismiss='modal'>&times;</button></div>
                </div>

            </div><!-- end modal-header-->
            <div class='modal-body' id="repeater">


            </div><!-- end modal-body-->

            <div class='modal-footer'>
              <button id="btnPrint" class='btn btn-default'  type='button' onclick="window.print();"><span>Print</span></button>  <button class='btn btn-default' data-dismiss='modal' type='button'>Close</button> <button class='btn btn-primary' type='button'>Save changes</button>
            </div><!-- end modal-footer -->
        </div><!-- end modal-content -->
    </div><!-- end modal-dialog -->
</div><!-- end myModal -->

无法打印完整的模态体

0 个答案: