How to export a html page to pdf in client side using JavaScript or jQuery?

Question

And if it is not possible then what are the other alternatives?

I tried to convert a complete html page to pdf with dynamic values but I can't .

But I saw some API like jspdf but it is not useful for me.

Is it possible to save a HTML page as PDF file using JavaScript or jQuery?

In Detail:

I generated one HTML Page which contains a list grid which populated all the available reports dynamically. It has one button 'save as PDF'. If the user clicks this button then the HTML page will be converted to a PDF file.

Is it possible using JavaScript or jquery?

you can not do this on the clientside, you need at least one php file which generates a pdf file for you if you want to covert a complete html page to pdf also possible duplicate of http://stackoverflow.com/questions/6896592 http://stackoverflow.com/questions/742271 http://stackoverflow.com/questions/10975694 — , Aug 27 '13 at 07:34
possible duplicate of [Is it possible to save HTML page as PDF using JavaScript or jquery?](http://stackoverflow.com/questions/6896592/is-it-possible-to-save-html-page-as-pdf-using-javascript-or-jquery) — , Aug 27 '13 at 07:36
also you can use the print function in browsers but it makes more sense and always works to use AJAX + a PHP based converter like TCPDF — , Aug 27 '13 at 07:37

score 10 · Answer 1 · 2022-01-14T08:56:24.253

10

jsPDF has a HTML renderer but it is in the early stages:

https://github.com/mrrio/jsPDF

http://parall.ax/products/jspdf

Another solution might be https://github.com/eKoopmans/html2pdf.js

But the best solution is the one from mujaffars. User AJAX and a stable PDF library written in PHP like FPDF, PDFLib, TCPDF and others.

edited Jan 14 '22 at 08:56

answered Sep 03 '13 at 10:59

1

They still say the html-renderer is experimental, 5 years later. – Qwerty Nov 23 '18 at 16:00
They don't support CSS, so only useable for really basic PDFs. – JDK92 Jan 12 '22 at 09:52
@JDK92 the answer is almost 9 years old. There might be better solutions now. Do you know any good solutions, that would work? – Jan 12 '22 at 13:23
@DanielRuf that's right, but unfortunately not much has changed. I couldn't find a reliable solution and for me the best way was to use the "Print -> Save to PDF" function in the browser as it seems to interpret the CSS fairly well. – JDK92 Jan 13 '22 at 13:18
@JDK92 I agree. Unfortunately there is no way (due to security reasons) to enforce "pdf" as printer and trigger the final "print" button. In our projects we implement a "window.print()" call or have some rather big solutions on the backend side like wkhtmltopdf and similar. – Jan 13 '22 at 15:03

score 1 · Answer 2 · edited May 23 '17 at 10:29

1

Well, if I have got your question properly then u need to Export a Table Data as PDF?

If Yes, then please see datatables.js with simple example here.

Also, look into use BytescoutPDF.js (Bytescout PDF Generator for JavaScript) to draw PDF invoice and JSPDF you can get the details here.

edited May 23 '17 at 10:29

Community

1
1

answered Aug 27 '13 at 07:29

Shubh

6,693
9
48
83

But this is not meant to convert a complete HTML page But this is not meant to convert a complete HTML page to PDF directly to PDF – Aug 27 '13 at 07:58

score -2 · Answer 3 · answered Aug 27 '13 at 07:14

You need to use any pdf generating library. You have not specified in which technology you are working (Php, .net or anything else)

In PHP you can use tcpdf library, Where you can pass html to generate pdf

$pdf = new TCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false);
$pdf->AddPage();
$pdf->writeHTML($pdfHtml, true, false, true, false, '');

Where $pdfHtml will be your page html

In your case when clicking on 'save as pdf' button you can get html by using html() method of jquery

eg.

var pageHtml = $('html').html();

by passing pageHtml to ajax page, You can create pdf in ajax page

The title clearly states `in client side`, php, .net and other server-side technologies are out of the question. — package, Aug 27 '13 at 07:17

Vaibs_Cool · Answer 4 · 2013-08-27T07:22:04.850

-6

It is possible indeed with pdf.js plugin pdf.js is an HTML5 experiment that explores building a faithful and efficient PDF renderer without native code assistance.

Online Demo

Github Link

JSFIDDLE DEMO

edited Aug 27 '13 at 07:22

answered Aug 27 '13 at 07:13

Vaibs_Cool