ugrás a tartalomhoz

html table nyomtatás több oldalra

Theo76 · 2017. Már. 30. (Cs), 10.31
Sziasztok!

Egy nagyméretű táblázatot kéne kinyomtatnom fejléccel együtt (minden oldalon meg kellene jelennie), de valamiért csak egy oldalt hajlandó nyomtatni, és az utolsó sort is csakrészben ha úgy jön ki...

A css:
#Printed {
    width: 100%;
    height: 100%;
    background: white;
}

@media print {
    @page {
        size: portrait;
    }

    header, footer, #ablakVezerles, .vezerloGomb {display:none;}
    #Printed { position: fixed;top: 0;left: 0; page-break-inside:auto; }
    body, html { background:white; }

    table { page-break-inside:auto; }
    tr    { page-break-inside:avoid; page-break-after:auto; }
    thead { display:table-header-group; }
}
a html:
<div id="Printed">
    <table>
        <thead>
            <tr>
                <td>fej1</td>
                <td>fej2</td>
                <td>fej3</td>
            </tr>
        <thead>
        <tbody>
            <tr>
                <td>adat1</td>
                <td>adat2</td>
                <td>adat3</td>
            </tr>
...
            <tr>
                <td>adat1</td>
                <td>adat2</td>
                <td>adat3</td>
            </tr>
        </tbody>
    </table>
</div>
‹ Facebook page plugin - events tab? Compass Sprite furcsa viselkedése ›
 ■
1

Sok sikert

janoszen · 2017. Már. 30. (Cs), 11.44
Sok sikert! Nekem meg sosem sikerult elernem hogy a nyomtatas normalisan mukodjon minden bongeszoben. Ha jot akarsz magadnak, sztem a PDF iranyba nezelodsz.
2

Melyik pdf generátort érdemes

Theo76 · 2017. Már. 30. (Cs), 12.19
Melyik pdf generátort érdemes használni? Ami a lényeg lenne nekem, hogy csak az adott div tartalmából kellene előállítani, és a táblázatot feldarabolni, illetve a tábla fejlécet minden egyes oldal elejére kitenni.
3

wkhtmltopdf nekem ez elég jól

szabo.b.gabor · 2017. Már. 30. (Cs), 13.56
wkhtmltopdf
nekem ez elég jól bejött. lehet javascript-tel is varázsolni benne, egész jó.
4

Köszi! Nézem ezt az

Theo76 · 2017. Már. 31. (P), 08.48
Köszi! Nézem ezt az alkalmazást... Viszont találtam egy megoldást, ami még működik (mondjuk eddig csak chrome-ban néztem meg...):

csak egy button-t kell elhelyezni az oldalon "btnPrint" id-vel. Persze még lehet rajta bőven finomítani, de a táblázatot tökéletesen nyomtatja. :)
$(function () {
    $("#btnPrint").click(function () {
        var contents = $("#Printed").html();
        var frame1 = $('<iframe />');

        frame1[0].name = "frame1";
        frame1.css({"position": "absolute", "top": "-1000000px"});
        $("body").append(frame1);

        var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;

        frameDoc.document.open();
//Create a new HTML document.
        frameDoc.document.write('<html><head><title>DIV Contents</title>');
        frameDoc.document.write('</head><body>');
//Append the external CSS file.
        frameDoc.document.write("<link rel=\"stylesheet\" href=\"/application/common/css/common.css\" type=\"text/css\" media=\"print\"/>");
        frameDoc.document.write("<link rel=\"stylesheet\" href=\"/application/common/css/text.css\" type=\"text/css\" media=\"print\"/>");
        frameDoc.document.write("<link rel=\"stylesheet\" href=\"/application/common/theme/logos/architect.css\" type=\"text/css\" media=\"print\"/>");
        frameDoc.document.write("<link rel=\"stylesheet\" href=\"/application/common/theme/logos/tables.css\" type=\"text/css\" media=\"print\"/>");
//Append the DIV contents.
        frameDoc.document.write(contents);
        frameDoc.document.write('</body></html>');
        frameDoc.document.close();
        setTimeout(function () {
            window.frames["frame1"].focus();
            window.frames["frame1"].print();
            frame1.remove();
        }, 500);
    });
});