printThis icon indicating copy to clipboard operation
printThis copied to clipboard

Table is overlapping with footer image.

Open kzhimel opened this issue 2 years ago • 1 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;
}

}

kzhimel avatar Nov 09 '23 10:11 kzhimel

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.

jasonday avatar Dec 19 '23 14:12 jasonday