convert HTML ( having Javascript ) to PDF using JavaScript

Question

I want to convert HTML (containing JavaScript ) to a PDF. How can I do that?

I just want to show what is being shown in web page. I am displaying a gantt chart that is generated by a JavaScript library.

Now I want to save that HTML web page as a PDF, how to do that?

i know , i want solution using java or javascript. both are acceptable for me. — g.revolution, Nov 06 '09 at 08:55
Some questions: Is Java already present in the project? How Javascript does this chart (images, table, ...) and where the data come from? I think your question won't have a direct solution. — sinuhepop, Nov 06 '09 at 09:04

score 5 · Accepted Answer · answered Nov 09 '09 at 14:39

We are also looking for some way to convert html files with complex javascript to pdf. The javasript in our files contains document.write and DOM manipulation.

We have tried using a combination of HtmlUnit to parse the files and Flying Saucer to render to pdf but the results are not satisfactory enough. It works, but in our case the pdf is not close enough to what the user wants.

If you want to try this out, here is a code snippet to convert a local html file to pdf.

URL url = new File("test.html").toURI().toURL();
WebClient webClient = new WebClient(); 
HtmlPage page = webClient.getPage(url);

OutputStream os = null;
try{
   os = new FileOutputStream("test.pdf");

   ITextRenderer renderer = new ITextRenderer();
   renderer.setDocument(page,url.toString());
   renderer.layout();
   renderer.createPDF(os);
} finally{
   if(os != null) os.close();
}

your code rocks... but as you have mentioned it is not 100% fine... so, did you find something new to enhance the quality of pdf ? — Narayan Subedi, Mar 04 '13 at 02:39
How to use this code in a visualforce page? I need this in salesforce Apex page — SFDC_Learner, Feb 03 '16 at 08:36

score 2 · Answer 2 · answered Jun 05 '18 at 14:05

I'm surprised no one mentioned the possibility to use an API to do the work.

Granted, if you want to stay secure, converting HTML to PDF directly from within the browser using javascript is not a good idea.

But here's what you can do:

When your user hit the "Print" (for example) button, you:

Send a request to your server at a specific endpoint with details about what to convert (URL of the page for instance).
This endpoint will then send the data to convert to an API, and will receive the PDF in response
which it will return to your user.

For a user point of view, they will receive a PDF by clicking on a button.

There are many available API that does the job, some better than others (that's not why I'm here) and a Google search will give you a lot of answers.

Depending on what is written your backend, you might be interested in PDFShift (Truth: I work there).

They offer ready to work packages for PHP, Python and Node.js. All you have to do is install the package, create an account, indicate your API key and you are all set!

The advantage of the API is that they work well in all languages. All you have to do is a request (generally POST) containing the data you want to be converted and get a PDF back. And depending on your usage, it's generally free, except if you are a heavy user.

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

0

Using the browser's Print... menu item, you can utilize a PDF Printer Driver, like PDFCreator. This way any JavaScript included in the page is processed by the browser when the page is rendered.

PDFCreator is a free tool to create PDF files from nearly any Windows application.

Create PDFs from any program that is able to print

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 06 '09 at 09:07

gimel

83,368
10
76
104

Paul Jowett · Answer 4 · 2010-06-10T06:06:29.393

With Docmosis or JODReports you could feed your HTML and Javascript to the document render process which could produce PDF or doc or other formats. The conversion underneath is performed by OpenOffice so results will be dependent on the OpenOffice import filters. You can try manually by saving your web page to a file, then loading with OpenOffice - if that looks good enough, then these tools will be able to give you the same result as a PDF.

Dimpu Aravind Buddha · Answer 5 · 2015-10-28T01:45:42.030

Check this out http://www.techumber.com/2015/04/html-to-pdf-conversion-using-javascript.html

Basically you need to use html2canvas and jspdf to make it work. First you will convert your dom to image and then you will use jspdf to create pdf with the images.

EDIT: A short note on how it work. We will use two libraries to make this job done. http://html2canvas.hertzen.com/ and https://github.com/MrRio/jsPDF First we will create a dom image by using html2canvas them we will use jspdf addImage method to add that image to pdf. It seems simple but there are few bugs in jsPdf and html2cavas so you may need to change dom style temporarily. Hope this helps.

Dusman · Answer 6 · 2020-10-03T11:31:55.947

-3

You can do it using a jquery,

Use this code to link the button...

$(document).ready(function() {
    $("#button_id").click(function() {
        window.print();
        return false;
    });
});

This link may be also helpful: jQuery Print HTML Pdf Page Options Link

edited Oct 03 '20 at 11:31

answered Nov 29 '15 at 20:50

Dusman

122
4
11

Could you explain in your answer how this is a solution for saving an HTML page as PDF? The Asker did not say anything about printing... – trincot Nov 29 '15 at 23:14
"10 jQuery Print Page Options" is only a link name, this plugin will give HTML page as PDF..,however there is a button in plugin which name is "PRINT",but it will give a pdf file.. – Dusman Dec 30 '15 at 09:53
OK, would be nice to add this information in your answer, as it is quite surprising to read *Use this code to link the print button...* when the Asker did not mention a print button at all. – trincot Dec 30 '15 at 09:58
2

This isn't even using a jquery plugin. This is using standard jquery to wait until the dom loads and then bind a click event that invokes the native window function `print()`. - 10,000 – mwilson Dec 07 '17 at 01:59
I know this is an old post, but it's a prime example why "link-only"-answers are bad. The link doesn't work any more so all this answer says is basically "trigger the print dialog to show" which is quite different from what the question was. – M. Eriksson Jul 24 '19 at 07:45

score -3 · Answer 7 · edited Sep 20 '11 at 08:01

-3

Copy and paste this in your site to provide a link which will convert the page to a PDF page.

<a href="javascript:void(window.open('http://www.htmltopdfconverter.net/?convert='+window.location))">Convert To PDF</a>

edited Sep 20 '11 at 08:01

Veger

37,240
11
105
116

answered Sep 19 '11 at 15:58

Jokin

11
2

convert HTML ( having Javascript ) to PDF using JavaScript

7 Answers7

Linked