Open in PDF Format With Defined Properties Using JavaScript

Question

I created a project using JavaScript where user can generate PDF document on button click. Everything is perfect except two things though I am not sure if it can be made worked. So here's the below that I did so far:

HTML:

<div class="card-body" id="card">
</div>

<input type="button" id="createDoc" value="Generate PDF" />

JavaScript:

 //Generate pdf
 $("body").on("click", "#createDoc", function () {
     var sTable = document.getElementById('card').innerHTML;
     var style = "<style>";
            
     style = style + "body { border: 2px solid #1f497d; padding: 4%; margin: 0; }";
     style = style + "table { width: 100%; font: 17px Calibri; } #showImages { height: 140px; width: 180px; } #BoxLeft { font-size:14px; width: 100%; margin: 0 auto; margin-top: 6%; height: 40px; } .Box1, .Box2 { float: left; width: 15%; } .box { height: 25px; border: 1px solid #bdbdbd; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 10px #bdbdbd; -webkit-box-shadow: 0 0 10px #bdbdbd; box-shadow: 0 0 10px #bdbdbd; } .Box1 { background-color: #1f497d; color:white; -webkit-print-color-adjust: exact; } .Box2 { background-color: white; -webkit-print-color-adjust: exact; }  #BoxRight { font-size:14px; width: 100%; margin: 0 auto; margin-top: -12%; height: 40px; } .Box3, .Box4 { float: right; width: 15%; } .Box3 { -webkit-print-color-adjust: exact; } .Box4 { background-color: #1f497d; color:white; -webkit-print-color-adjust: exact; }";
     style = style + "table, td { border: solid 2px #1f497d; border-collapse: collapse; font-size:14px;";
     style = style + "padding: 2px 3px;text-align: center; } #projects th { height:10px; font-size:14px; background-color: #1f497d; -webkit-print-color-adjust: exact; color: white; }";
     style = style + ".detailsWidth { width:60%; } .checked { color: gray; } #projects { margin-top: 9%; } .action, .hideId, .hide, .hideDate { display:none; } .top { margin-top: -5%; margin-left: 4%; } .topAside { margin-top: -5%; margin-left: 4%; } .heading { margin-top:3%; text-align:center; } .logoGpp { -webkit-print-color-adjust: exact; height: 140px; width: 250px; display: block; margin-left: auto; margin-right: auto; }";
     style = style + "</style>";

     var win = window.open('', '', 'height=700,width=700');

     win.document.write("<html><head>");
     win.document.write(style);
     win.document.write("</head>");
     win.document.write("<body><img class='logoGpp' src='/img/logo.jpg' /><div class='top topAside'><div id='BoxLeft'><div class='Box1'><div class='box'><h4 class='heading'>Job Reference: </h4></div></div><div class='Box2'><div class='box'><h4 class='heading'>" + $(".card-title").html() + "</h4></div></div></div></div>");
     win.document.write("<div class='top'><div id='BoxRight'><div class='Box3'><div class='box'><h4 class='heading'>" + $(".card-title").html() + "</h4></div></div><div class='Box4'><div class='box'><h4 class='heading'>Initiation Date: </h4></div></div></div></div><br />");
     win.document.write(sTable);
     win.document.write("</body></html>");

     win.document.close();

     win.print();
});

So using the above, I am retrieving all data from a table that's appended to div a card (With a id). It renders content perfectly in the print preview with PDF format. But I am willing to know if it's possible to render the format in landscape and A4 paper size using the above JavaScript code, so I can render it by default with those properties. Right now, I've to do it manually in the print preview section.

I'll try it @James and didn't have any idea on that. Thanks for the suggestion. — user8512043, Jul 27 '21 at 17:34

pascalwittler.de · Accepted Answer · 2021-07-27T17:36:22.617

There is an experimental CSS feature to set a suggestion for the default settings inside the print preview dialog, currently only supported by Chrome and browsers with a Chromium base:

https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size

But in general, my impression of your provided code is that it's not generating a PDF file but it opens a new window or tab with an HTML page so the user has to print this page using a virtual PDF printer.

There are many libraries for PHP which generate a real PDF file from HTML content. Maybe one of them could be a sustainable solution for you.

One of many libraries doing that is Dompdf: https://github.com/dompdf/dompdf

My plan is not to use any plugins, though not sure if the default css feature can help. Thanks for it and will try doing so. — user8512043, Jul 27 '21 at 17:37

Open in PDF Format With Defined Properties Using JavaScript

1 Answers1