Using JS to print page as PDF in Chrome and open it

Question

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 command. 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.

@OzgurSar, in order to use this, you can use `html2canvas` and `jsPDF`. [Here](https://stackoverflow.com/questions/26481645/how-to-use-html2canvas-and-jspdf-to-export-to-pdf-in-a-proper-and-simple-way) is an answer similar to it. — myjobistobehappy, Dec 11 '20 at 05: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, Dec 11 '20 at 06:59
@OzgurSar, you cannot trigger save as pdf, but you can use `window.print()` in order to show the print dialog. — myjobistobehappy, Dec 11 '20 at 18:15

score 1 · Answer 1 · answered Dec 05 '20 at 12:39

1

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.

answered Dec 05 '20 at 12:39

Steel

44
3

3

thanks for your response but this isn't the answer for the question. Question asker Arthur was asking if it is possible to trigger Chrome's `Save as PDF` function using javascript. You can already to it manually by selecting it from the Print menu. – Ozgur Sar Dec 05 '20 at 12:42
2

Understood, as far as I know there is no way to make Chrome, Firefox etc save a PDF without a user's consent. – Steel Dec 05 '20 at 12:50

score -2 · Accepted Answer · answered Mar 18 '19 at 23:50

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.com/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.com/content/dam/acom/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

I'm surprised you got the checkmark on this. I feel like you didn't answer the user's questions. Your answer implies that the PDF is already generated and is being served somewhere. I think the OP is asking how he can make a button which essentially duplicates "CMD + P" then selects "Save as PDF" and then clicks save, triggering the newly created PDF being downloaded as a file or opens in a new tab. — Corey Snyder, Sep 13 '19 at 15:20

Using JS to print page as PDF in Chrome and open it

2 Answers2