jasonday / printThis

jQuery printing plugin; print specific elements on a page

Home Page:https://jasonday.github.io/printThis/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Table is overlapping with footer image.

kzhimel opened this issue · comments

Describe the bug
While repeating footer, if the table is multiple pages long the footer image overlap with table data.

To Reproduce
Steps to reproduce the behavior:

  1. Make a large table
  2. Try adding footer image via print this plugin
    footer: 'img src here',
  3. Press print
  4. See the overlapping

Expected behavior
There should be a option to adjust footer margin in case of table or large data print. Or the plugin should handle page break more efficiently.

Screenshots
image
image

Desktop (please complete the following information):

  • OS: windows 10
  • Browser: chrome
  • Version: latest

Additional context
I have tried various css to avoid this problem still doesn't solve the issues. However I am adding the code:
this is the execution:
function printReport() {
$("#reportBody").printThis({
debug: false,
importCSS: true,
importStyle: true,
removeInline: false,
copyTagClasses: true,
copyTagStyles: true,
canvas: true,
base: false,
loadCSS: "/Content/custom/report-media.css",
footer: 'inside footer tag is a image src',
beforePrint: removePlusBtn(),
afterPrint: enablePlusBtn
});
}

image

This is print media css:
@media print {
@page {
    size: A4; /* auto is the initial value */
    /* this affects the margin in the printer settings */
    margin: 25mm 25mm 25mm 25mm;
}

.content-page {
    position: initial;
    top: 0
}

div {
    font-size: 1mm;
}

footer {
    position: fixed;
    bottom: 0;
    text-align: center;
    width: 100%;
    margin: 0 auto;
}

.table-breaked {
    page-break-before: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}

.footer-repeat {
    display: table-footer-group;
}

.page-break {
    visibility: hidden;
    page-break-before: always;
    margin-top: 5px;
    margin-bottom: 5px;
}

tr {
    page-break-inside: avoid;
}

thead {
    display: table-header-group
}

tfoot {
    display: table-row-group
}

.page-break-before {
    page-break-before: always;
}

}

The problem is that there's no way to know where to break the table because if you try to introduce a break, the break location will change based on paper size. The table is auto-flowing to the next printed page. The footer we are adding in printThis is not a footer in the same sense as when authoring a Microsoft document, it's merely appended content after the defined print content.
One possible approach is to increase your primary container's bottom margin and then put a negative margin on the footer content. However, with the way tables work in printing, I can't guarantee this will work.