在长表内的两行之间应用分页符

时间：2015-11-02 05:49:58

标签： css printing jquery-plugins html-table

我正在使用Bootstrap在我的页面中显示表格。我使用jQuery打印插件打印它，但分页符不能正常工作。文本在页面之间被切断。 Here是图片：

我的表格HTML示例

<div id="showGrid" class="table-responsive" style="max-height: 175px;">
        <table class="table table-striped table-bordered table-hover table-condensed tablecollapse in" style="margin-bottom: 0px;" id="table">
            <thead>
                <tr>
                    <th> DATE </th>
                    <th> FORM NAME </th>
                    <th> OP NO </th>
                    <th> PATIENT NAME </th>
                    <th> AMOUNT </th>
                    <th> PAYMENT MODE </th>
                    <th> PAY TYPE </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="text-uppercase"> 2015-10-26 <a class="btn btn-box-tool btn-sm prints hidden" data-toggle="tooltip" title="" data-original-title="Print"><i class="fa fa-print"></i></a></td>
                    <td class="text-uppercase"> Patient Registration </td>
                    <td class="text-uppercase"> AN1026-1 </td>
                    <td class="text-uppercase"> FFFFF  </td>
                    <td class="text-uppercase"> 300.0 </td>
                    <td class="text-uppercase"> CASH </td>
                    <td class="text-uppercase"> CASH </td>
                </tr>
                <tr>
                    <td class="text-uppercase"> 2015-10-26 <a class="btn btn-box-tool btn-sm prints hidden" data-toggle="tooltip" title="" data-original-title="Print"><i class="fa fa-print"></i></a></td>
                    <td class="text-uppercase"> Patient Registration </td>
                    <td class="text-uppercase"> AN1026-2 </td>
                    <td class="text-uppercase"> VVVVV  </td>
                    <td class="text-uppercase"> 300.0 </td>
                    <td class="text-uppercase"> CASH </td>
                    <td class="text-uppercase"> CASH </td>
                </tr>
            </tbody>
        </table>
    </div>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool btn-sm" name="btnPrint" id="btnPrint" data-toggle="tooltip" title="" data-original-title="Print" onclick="printAll();"><i class="fa fa-print"></i></button>
</div>

用于打印内容的CSS 

@media print {
*, :after, :before {
    text-shadow: none!important;
    background: 0 0!important;
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}

.invoice {
    width: 100%;
    border: 0;
    margin: 0;
    padding: 0;
}

.invoice-col {
    float: left;
    width: 33.3333333%;
}

.table-responsive {
    overflow: auto;
}

.table-responsive > .table tr th, .table-responsive > .table tr td {
    white-space: normal!important;
}

a, a:visited {
    text-decoration: underline;
}

a[href]:after {
    content: " (" attr(href) ")";
}

abbr[title]:after {
    content: " (" attr(title) ")";
}

a[href^="javascript:"]:after, a[href^="#"]:after {
    content: "";
}

blockquote, pre {
    border: 1px solid #999;
    page-break-inside: avoid;
}

thead {
    display: table-header-group;
}

img {
    page-break-inside: avoid;
}

img {
    max-width: 100%!important;
}

h2, h3, p {
    orphans: 3;
    widows: 3;
}

h2, h3 {
    page-break-after: avoid;
}

select {
    background: #fff!important;
}

.navbar {
    display: none;
}

.btn > .caret, .dropup > .btn > .caret {
    border-top-color: #000!important;
}

.label {
    border: 1px solid #000;
}

.table {
    border-collapse: collapse!important;
}

.table td {
    background-color: #fff!important;
}

thead{
    background-color: #337ab7 !important;
    color: white !important;
}


.table-bordered td, .table-bordered th {
    border: 1px solid #ddd!important;
}
}

我从https://github.com/DoersGuild/jQuery.print

获得的印刷品 
(function($) {
"use strict";
function getjQueryObject(string) {
    var jqObj = $("");
    try {
        jqObj = $(string)
                .clone();
    } catch (e) {
        jqObj = $("<span />")
                .html(string);
    }
    return jqObj;
}

function printFrame(frameWindow, timeout) {
    var def = $.Deferred();
    try {
        setTimeout(function() {
            frameWindow.focus();
            try {
                if (!frameWindow.document.execCommand('print', false, null))     {
                    frameWindow.print();
                }
            } catch (e) {
                frameWindow.print();
            }
            frameWindow.close();
            def.resolve();
        }, timeout);
    } catch (err) {
        def.reject(err);
    }
    return def;
}

function printContentInNewWindow(content, timeout) {
    var w = window.open();
    w.document.write(content);
    w.document.close();
    return printFrame(w, timeout);
}

function isNode(o) {
    return !!(typeof Node === "object" ? o instanceof Node : o && typeof o === "object" && typeof o.nodeType === "number" && typeof o.nodeName === "string");
}
$.print = $.fn.print = function() {
    var options, $this, self = this;
    if (self instanceof $) {
        self = self.get(0);
    }
    if (isNode(self)) {
        $this = $(self);
        if (arguments.length > 0) {
            options = arguments[0];
        }
    } else {
        if (arguments.length > 0) {
            $this = $(arguments[0]);
            if (isNode($this[0])) {
                if (arguments.length > 1) {
                    options = arguments[1];
                }
            } else {
                options = arguments[0];
                $this = $("html");
            }
        } else {
            $this = $("html");
        }
    }
    var defaults = {
        globalStyles: true,
        mediaPrint: true,
        stylesheet: "plugins/print/print.css",
        noPrintSelector: ".no-print",
        iframe: true,
        append: null,
        prepend: null,
        manuallyCopyFormValues: true,
        deferred: $.Deferred(),
        timeout: 250
    };
    options = $.extend({}, defaults, (options || {}));
    var $styles = $("");
    if (options.globalStyles) {
        $styles = $("style, link, meta, title");
    } else if (options.mediaPrint) {
        $styles = $("link[media=print]");
    }
    if (options.stylesheet) {
        $styles = $.merge($styles, $('<link rel="stylesheet" href="' + options.stylesheet + '">'));

    }
    var copy = $this.clone();
    copy = $("<span/>")
            .append(copy);
    copy.find(options.noPrintSelector)
            .remove();
    copy.append($styles.clone());
    copy.append(getjQueryObject(options.append));
    copy.prepend(getjQueryObject(options.prepend));
    if (options.manuallyCopyFormValues) {
        copy.find("input")
                .each(function() {
                    var $field = $(this);
                    if ($field.is("[type='radio']") || $field.is("[type='checkbox']")) {
                        if ($field.prop("checked")) {
                            $field.attr("checked", "checked");
                        }
                    } else {
                        $field.attr("value", $field.val());
                    }
                });
        copy.find("select").each(function() {
            var $field = $(this);
            $field.find(":selected").attr("selected", "selected");
        });
        copy.find("textarea").each(function() {
            var $field = $(this);
            $field.text($field.val());
        });
    }
    var content = copy.html();
    try {
        options.deferred.notify('generated_markup', content, copy);
    } catch (err) {
        console.warn('Error notifying deferred', err);
    }
    copy.remove();
    if (options.iframe) {
        try {
            var $iframe = $(options.iframe + "");
            var iframeCount = $iframe.length;
            if (iframeCount === 0) {
                $iframe = $('<iframe height="0" width="0" border="0" wmode="Opaque"/>')
                        .prependTo('body')
                        .css({
                            "position": "absolute",
                            "top": -999,
                            "left": -999
                        });
            }
            var w, wdoc;
            w = $iframe.get(0);
            w = w.contentWindow || w.contentDocument || w;
            wdoc = w.document || w.contentDocument || w;
            wdoc.open();
            wdoc.write(content);
            wdoc.close();
            printFrame(w, options.timeout)
                    .done(function() {
                        setTimeout(function() {
                            if (iframeCount === 0) {
                                $iframe.remove();
                            }
                        }, 100);
                    })
                    .fail(function(err) {
                        console.error("Failed to print from iframe", err);
                        printContentInNewWindow(content, options.timeout);
                    })
                    .always(function() {
                        try {
                            options.deferred.resolve();
                        } catch (err) {
                            console.warn('Error notifying deferred', err);
                        }
                    });
        } catch (e) {
            console.error("Failed to print from iframe", e.stack, e.message);
            printContentInNewWindow(content, options.timeout)
                    .always(function() {
                        try {
                            options.deferred.resolve();
                        } catch (err) {
                            console.warn('Error notifying deferred', err);
                        }
                    });
        }
    } else {
        printContentInNewWindow(content, options.timeout)
                .always(function() {
                    try {
                        options.deferred.resolve();
                    } catch (err) {
                        console.warn('Error notifying deferred', err);
                    }
                });
    }
    return this;
    };
})(jQuery);

function printAll() { // added by me
    $('#table').print();
}

1 个答案:

答案 0 :(得分：0)

通过添加此css解决了Firefox和IE中的问题。

table{
    page-break-inside: auto;
}

tr{
    page-break-inside: avoid;
}

由于我使用bootstrap，我不得不在css页面添加这些。从这里找到https://gist.github.com/donnierayjones/6fd9802d992b2d8d6cfd 

.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
}
.col-sm-12 {
    width: 100%;
}
.col-sm-11 {
    width: 91.66666667%;
}
.col-sm-10 {
    width: 83.33333333%;
}
.col-sm-9 {
    width: 75%;
}
.col-sm-8 {
    width: 66.66666667%;
}
.col-sm-7 {
    width: 58.33333333%;
}
.col-sm-6 {
    width: 50%;
}
.col-sm-5 {
    width: 41.66666667%;
}
.col-sm-4 {
    width: 33.33333333%;
}
.col-sm-3 {
    width: 25%;
}
.col-sm-2 {
    width: 16.66666667%;
}
.col-sm-1 {
    width: 8.33333333%;
}
.col-sm-pull-12 {
    right: 100%;
}
.col-sm-pull-11 {
    right: 91.66666667%;
}
.col-sm-pull-10 {
    right: 83.33333333%;
}
.col-sm-pull-9 {
    right: 75%;
}
.col-sm-pull-8 {
    right: 66.66666667%;
}
.col-sm-pull-7 {
    right: 58.33333333%;
}
.col-sm-pull-6 {
    right: 50%;
}
.col-sm-pull-5 {
    right: 41.66666667%;
}
.col-sm-pull-4 {
    right: 33.33333333%;
}
.col-sm-pull-3 {
    right: 25%;
}
.col-sm-pull-2 {
    right: 16.66666667%;
}
.col-sm-pull-1 {
    right: 8.33333333%;
}
.col-sm-pull-0 {
    right: auto;
}
.col-sm-push-12 {
    left: 100%;
}
.col-sm-push-11 {
    left: 91.66666667%;
}
.col-sm-push-10 {
    left: 83.33333333%;
}
.col-sm-push-9 {
    left: 75%;
}
.col-sm-push-8 {
    left: 66.66666667%;
}
.col-sm-push-7 {
    left: 58.33333333%;
}
.col-sm-push-6 {
    left: 50%;
}
.col-sm-push-5 {
    left: 41.66666667%;
}
.col-sm-push-4 {
    left: 33.33333333%;
}
.col-sm-push-3 {
    left: 25%;
}
.col-sm-push-2 {
    left: 16.66666667%;
}
.col-sm-push-1 {
    left: 8.33333333%;
}
.col-sm-push-0 {
    left: auto;
}
.col-sm-offset-12 {
    margin-left: 100%;
}
.col-sm-offset-11 {
    margin-left: 91.66666667%;
}
.col-sm-offset-10 {
    margin-left: 83.33333333%;
}
.col-sm-offset-9 {
    margin-left: 75%;
}
.col-sm-offset-8 {
    margin-left: 66.66666667%;
}
.col-sm-offset-7 {
    margin-left: 58.33333333%;
}
.col-sm-offset-6 {
    margin-left: 50%;
}
.col-sm-offset-5 {
    margin-left: 41.66666667%;
}
.col-sm-offset-4 {
    margin-left: 33.33333333%;
}
.col-sm-offset-3 {
    margin-left: 25%;
}
.col-sm-offset-2 {
    margin-left: 16.66666667%;
}
.col-sm-offset-1 {
    margin-left: 8.33333333%;
}
.col-sm-offset-0 {
    margin-left: 0%;
}
.visible-xs {
    display: none !important;
}
.hidden-xs {
    display: block !important;
}
table.hidden-xs {
    display: table;
}
tr.hidden-xs {
    display: table-row !important;
}
th.hidden-xs,
td.hidden-xs {
    display: table-cell !important;
}
.hidden-xs.hidden-print {
    display: none !important;
}
.hidden-sm {
    display: none !important;
}
.visible-sm {
    display: block !important;
}
table.visible-sm {
    display: table;
}
tr.visible-sm {
    display: table-row !important;
}
th.visible-sm,
td.visible-sm {
    display: table-cell !important;
}

To prevent overflow of table to the right if the table width is too much, Add these.

body {
    overflow-x: visible;
    overflow-y: visible;
}

Hope this helps someone.
相关问题
最新问题