Menu
I want to save web page directly to PDF.
What I have done is-
<form> <input type=button name=print value="Print" onClick="window.print()"> </form>But it gives me option for print or save the page as PDF.
But what I want is when I click on the button, it directly save the page as PDF not showing any option.
Is there any solution in JavaScript?
Thanks in advance for helping.
347
To save HTML page as PDF using JavaScript, we can use the html2pdf library. const element = document. getElementById("element-to-print"); const opt = { margin: 1, filename: "myfile.
Explanation: The Export Button has been assigned a jQuery click event handler. When the Export Button is clicked, the HTML Table is converted into a HTML5 Canvas using html2canvas plugin and then the HTML5 Canvas will be exported to PDF using the pdfmake plugin.
Code to Print and Save HTML Page as PDF. You can call Javascript function inside the HTML. The window.print () is the inbuilt function to pint the current window. The printFunction () is user define javascript function which you call from HTML object. By clicking on the button, the user can save the HTML page as PDF or can download it.
The following example shows how to use the jsPDF library to convert HTML to PDF and generate PDF file from HTML content using JavaScript. Retrieve the HTML content from the specific element by ID or class. Convert HTML content of the specific part of the web page and generate PDF. Save and download the HTML content as a PDF file.
jsPDF We can start by introducing jsPDF, jsPDF is an open-source library for generating pdf using only JavaScript. It simply creates a pdf page and applies your formatting to the page. An example of using the jsPDF with JavaScript:
Yes, Use jspdf To create a pdf file. You will however need to write the HTML to pdf conversion yourself. Just use printer friendly versions of your page and let the user choose how he wants to print the page. So the answer is write your own PDF writer or get a existing PDF writer to do it for you (on the server).
The short answer is no, you cannot prevent users from seeing the option in their browser using just javascript.
The slightly-longer answer, is that you can do this with a bit more than javascript.
Using a service such as html2canvas, you can send a POST request to a page on your server. Use that page to convert the image to a PDF, and have it output the file as a download.
Assuming you're using PHP:
<?php header("Content-type:application/pdf"); header("Content-Disposition:attachment;filename='screen-shot.pdf'"); // The above headers will cause the file to automatically be downloaded. // Use a library to convert the image to a PDF here. An example library to convert an image to a PDF is mPDF, or TCPDF. Feel free to Google others, especially if you're not using PHP.
Do note that this solution is inferior to them just making the choice themselves, as the quality definitely won't be as nice.
166
Must notice here that the suggested solution converts HTML into image and then the raster image is converted into PDF.
If you want to save into PDF that is searchable (so can be archived and printed with best quality) and the text is printed clearly then you should consider one of these options:
Ask user to save the page into PDF by providing instruction to do so for Google Chrome or Safari (both browsers are able to "print" page into PDF files). Maybe you may even try to show this instruction and invoke the printing dialog
Use some of client side javascript libraries to generate PDF from the data with the tool like jsPDF (free, open source) or similar
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
