0
Я использую 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;
}
}
JS для печати, которое я получил от 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();
}
Проблема была с Chrome. Я напечатал страницу отлично в Firefox и IE. –
Эта проблема также показана в Firefox .. –
@HimaniTrivedi Th ниже код помог мне в firefox. Попробуй это. –