6

I have a web page in which a fair amount of the content is dynamically built up (jquery ajax etc) and have a requirement to present a printable version of it.

I'm coming across all the usual issues re html / printing, which I can probably (given time) get round, but it got me thinking - is there a way of taking the DOM and generating a PDF out of it using javascript. It's probably a bit of a daft question - it sounds a bit tricky, and I'm not too sure even if I could build up a PDF file using javascript, how I would then present it to the user.

What do people think?

Jonny
  • 796
  • 2
  • 10
  • 23

2 Answers2

2
var doc = new jsPDF();
doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
doc.addPage();
doc.text(20, 20, 'Do you like that?');
// Output as Data URI
doc.output('datauri');

https://parall.ax/products/jspdf , I think this will help you

Milindu Sanoj Kumarage
  • 2,714
  • 2
  • 31
  • 54
  • Hi, thanks - looks really good. Was hoping I could get away with basically taking what was already built up in the DOM and just giving a few more details (page size and the like). – Jonny Mar 19 '12 at 21:53
  • @Moo [link]http://stackoverflow.com/questions/1686280/convert-html-having-javascript-to-pdf-using-java-javascript – Milindu Sanoj Kumarage Mar 20 '12 at 05:07
  • I'm going to attempt to see if I can get dompdf to work for me. I should be able to refactor my server side code around a bit so I can rebuild the html that is showing client side on the server. I should be able to send my generated charts back to the server as images (hopefully avoiding path traversal and the like). Couple all this with Nicks suggestion above and in theory I may be able to get a PDF back similar to what I have on the screen. Phew. Thanks for all the help. – Jonny Mar 20 '12 at 21:59
  • You can't style with CSS, you have to use their API. ( eg: `doc.setTextColor(100);` ) – Milindu Sanoj Kumarage Aug 19 '15 at 08:57
0

This is a question I asked a few days ago regarding a similar kind of site/problem.

My solution has been: (1) in Javascript, to set a cookie and then call a PHP script using location.href = ...; (not AJAX) and then (2) have the PHP script access the cookie to determine the sort of report required, and then echo a form which prompts the user to download a file using the correct headers. The PHP was something like the following:

header("Content-type: application/vnd.ms-word");
header("Content-Disposition: attachment;Filename=test.doc");

echo "<html>";
echo "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=Windows-1252\">";
echo "<body>";
echo "Testing-2-3!";
echo "</body>";
echo "</html>";

It proved impossible to get what I wanted to happen using AJAX because AJAX never allows you to prompt the user.

You could use this method do something similar, but in your case you'd generate a PDF rather than a .doc file (or download one that is pre-prepared).

One advantage of this method, of course, is that it involves no page reloads.

Community
  • 1
  • 1
Nick
  • 5,995
  • 12
  • 54
  • 78
  • Hmm, interesting. I will have a play around with this idea. I have a problem in that I have some graphs on the page that are built up in javascript (zingcharts), so I would need to somehow get the pictures back to the server to build up a PDF (or regenerate the graphs in php). Ultimately I am trying to be lazy - I have a nice representation of what I want on the screen (html) at the client. Just can't get all the browsers to play ball when it comes to printing. – Jonny Mar 19 '12 at 22:03
  • Am going to use both suggested answers. Thanks for your help. – Jonny Mar 20 '12 at 22:02