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:
  1. #Printed {  
  2.     width: 100%;  
  3.     height: 100%;  
  4.     background: white;  
  5. }  
  6.   
  7. @media print {  
  8.     @page {  
  9.         size: portrait;  
  10.     }  
  11.   
  12.     header, footer, #ablakVezerles, .vezerloGomb {display:none;}  
  13.     #Printed { position: fixed;top: 0;left: 0; page-break-inside:auto; }  
  14.     body, html { background:white; }  
  15.   
  16.     table { page-break-inside:auto; }  
  17.     tr    { page-break-inside:avoid; page-break-after:auto; }  
  18.     thead { display:table-header-group; }  
  19. }  
a html:
  1. <div id="Printed">  
  2.     <table>  
  3.         <thead>  
  4.             <tr>  
  5.                 <td>fej1</td>  
  6.                 <td>fej2</td>  
  7.                 <td>fej3</td>  
  8.             </tr>  
  9.         <thead>  
  10.         <tbody>  
  11.             <tr>  
  12.                 <td>adat1</td>  
  13.                 <td>adat2</td>  
  14.                 <td>adat3</td>  
  15.             </tr>  
  16. ...  
  17.             <tr>  
  18.                 <td>adat1</td>  
  19.                 <td>adat2</td>  
  20.                 <td>adat3</td>  
  21.             </tr>  
  22.         </tbody>  
  23.     </table>  
  24. </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. :)
  1. $(function () {  
  2.     $("#btnPrint").click(function () {  
  3.         var contents = $("#Printed").html();  
  4.         var frame1 = $('<iframe />');  
  5.   
  6.         frame1[0].name = "frame1";  
  7.         frame1.css({"position": "absolute", "top": "-1000000px"});  
  8.         $("body").append(frame1);  
  9.   
  10.         var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;  
  11.   
  12.         frameDoc.document.open();  
  13. //Create a new HTML document.  
  14.         frameDoc.document.write('<html><head><title>DIV Contents</title>');  
  15.         frameDoc.document.write('</head><body>');  
  16. //Append the external CSS file.  
  17.         frameDoc.document.write("<link rel=\"stylesheet\" href=\"/application/common/css/common.css\" type=\"text/css\" media=\"print\"/>");  
  18.         frameDoc.document.write("<link rel=\"stylesheet\" href=\"/application/common/css/text.css\" type=\"text/css\" media=\"print\"/>");  
  19.         frameDoc.document.write("<link rel=\"stylesheet\" href=\"/application/common/theme/logos/architect.css\" type=\"text/css\" media=\"print\"/>");  
  20.         frameDoc.document.write("<link rel=\"stylesheet\" href=\"/application/common/theme/logos/tables.css\" type=\"text/css\" media=\"print\"/>");  
  21. //Append the DIV contents.  
  22.         frameDoc.document.write(contents);  
  23.         frameDoc.document.write('</body></html>');  
  24.         frameDoc.document.close();  
  25.         setTimeout(function () {  
  26.             window.frames["frame1"].focus();  
  27.             window.frames["frame1"].print();  
  28.             frame1.remove();  
  29.         }, 500);  
  30.     });  
  31. });