I have an internal site with lots of different pages, all of them has a printable version controlled by CSS only. My users create PDFs using Chrome's Print/Save As PDF menu mand. I wonder if it would be possible to use JavaScript to initiate Save As PDF from a button and automatically open the saved PDF (actually saving is not important, just viewing it on a new tab is fine).

Chrome-only solution is OK. It's also not a problem if a Chrome extension needs to be installed. Anything is fine as long as I don't have to write extra PDF rendering code for each page layout.

I have an internal site with lots of different pages, all of them has a printable version controlled by CSS only. My users create PDFs using Chrome's Print/Save As PDF menu mand. I wonder if it would be possible to use JavaScript to initiate Save As PDF from a button and automatically open the saved PDF (actually saving is not important, just viewing it on a new tab is fine).

Chrome-only solution is OK. It's also not a problem if a Chrome extension needs to be installed. Anything is fine as long as I don't have to write extra PDF rendering code for each page layout.

• javascript
• google-chrome
• pdf

• 4 Did you found any solution? – xavip Commented May 15, 2018 at 10:56
• 3 No. I taught my users how to print from Chrome's menu. – Arthur Commented May 15, 2018 at 14:37
• @OzgurSar, in order to use this, you can use html2canvas and jsPDF. Here is an answer similar to it. – myjobistobehappy Commented Dec 11, 2020 at 5:15
• @myjobistobehappy yes I'm aware of the pdf libraries but in this specific condition I just want to learn if it is possible to trigger the save as pdf option of chrome or not. – Ozgur Sar Commented Dec 11, 2020 at 6:59
• @OzgurSar, you cannot trigger save as pdf, but you can use window.print() in order to show the print dialog. – myjobistobehappy Commented Dec 11, 2020 at 18:15

2 Answers 2

There is no way to force a browser to print something as a PDF, or even send a request to a printer, the best method you can do it use the print() function in JavaScript.

A way you can do this is to make it an iframe object and print it like this:

document.getElementById('content-frame').contentWindow.window.print();

That would make it send a print menu for the iFrame, printing only the content within the iFrame.

The html embed tag displays PDFs with print and download options. Depending on the setup of the page, you could append an element somewhere with the pdf source dynamically populated from a button users see beside the PDF's name. For Example...

HTML:

    <div class="parent-container">
    <h3 class="pdf-name">Some PDF Name</h3><button type="button" class="open-pdf" 
    data-pdf="source">Open</button>
    </div> 

Javascript:

    function displayEmbeddedPdf (event){
      event.preventDefault();
      let pdfSource = $(this).data("pdf");

      let pdfDisplay=`<embed class="embed-responsive-item embedded-pdf" 
      src="https://via.placeholder./150#view=FitH">`

      $(this).parent().append(pdfDisplay);
    }

    $( document ).ready(function() {
      $(".open-pdf").click(displayEmbeddedPdf) 
    });

I've used an image placeholder in the space below, but you could instead insert the pdfSource variable to access a source in your directory ... Also note that the "embed-responsive-item" class on the embed tag is from with Twitter Bootstrap and helps with the responsive formatting. Also, "#view=FitH" is an open parameter. Here's more info about open parameters: https://www.adobe./content/dam/a/en/devnet/acrobat/pdfs/PDFOpenParams.pdf

See the code on this CodePen: https://codepen.io/gemiller/pen/qvyaGZ

Here's an example of what an embedded pdf looks like: https://msu.edu/~urban/sme865/resources/embedded_pdf.html