How to convert current xhtml page with javascript charts to pdf - javascript

I have a web application with some pages where there are some texts, and some charts generated with javascript library. I want to show a "Download as pdf" link on each page, which will export the current page in pdf version.
Is there any way to do this.?

http://www.cloudformatter.com/CSS2Pdf has 12 different chart/map javascript libraries in the demos panel showing the pure SVG to PDF as vector information along with text, tables.

http://phantomjs.org/
Just run from command line
phantomjs rasterize.js 'http://en.wikipedia.org/w/index.php?title=Jakarta&printable=yes' jakarta.pdf

You can export image, then insert it into pdf file using itext or another library.
I think the below link help you:
http://www.highcharts.com/component/content/article/2-articles/news/56-improved-image-export-with-phantomjs

Related

Export current rendered view/template as a PDF with Nativescript-VueJS

Using NativeScript + VueJS, I'm trying to find a way to take a dynamic template that's rendered based on props and route data, and tap a button to save the "view" as a PDF to the filesystem.
I found this tutorial here which gives me a start: https://medium.com/#kumarandena/pdf-generation-in-nativescript-using-javascript-libraries-864ecf4e9a3a
This generates a Base64 which you then copy to clipboard and open in a browser. In iOS for example if I choose to save the page as a file it's just unknown.pdf. So my goal is to reference an html element, like a div, and save all the contents exactly as they appear into a folder of my choice in the native file system.
There's little to find on this so wondering if someone has accomplished this.
I use domtoimage to convert any dom element to an image, and it works well. Then you can probably insert that image to a pdf using jsPDF or pdfMake.
I see in the pdfMake playground that you can insert an image with a dataurl format.

Convert HTML to PDF with links

Is there a node.js module or a javascript library that can convert HTML/Page into PDF with selectable texts and working links? I've tried Phantomjs. But since its the only screenshot the page and convert it to pdf, texts are not selectable and links are not working. Also tried jsPDF but links are not working either. Hope you guys can share some of your experience in dealing the same problem.
Your response is greatly appreciated.
You can parse the HTML body with htmlparser. The complete html will be properly converted to JSON.
Depending upon the keys, you can then write it to a PDF using pdfkit.
This is very general solution. If you give us an insight as to what type of HTML you want to get into a PDF, maybe then we would be able to help with some specific code or logic.
Try http://www.cloudformatter.com/css2pdf.
Their links demo at http://www.cloudformatter.com/CSS2Pdf.Demos.Hyperlinks shows external links and internal links within the generated PDF.

How show jsPDF data on image

I am exporting some charts created in d3 to PDF. I am using jsPDF lib to achieve this. For instance I created a pdf as follows-
var pdf=new jsPDF('p','mm',[200,300]);
pdf.addImage(...);
pdf.addImage(...);
pdf.rect(...);
...
Now I want to display this pdf in an image element on html page.
Is there any way to do this? May be if I can get data from this pdf,Something like-
pdf.getData();
You have to use third party library to render pdf in javascript. For example
https://mozilla.github.io/pdf.js/

Generate pdf from HTML and SVG

I have some SVG element in my HTML page with some HTML controls. I want to export all in a pdf. The export need to be "correct", I can't, for example, create a picture and create a pdf from it. And the html text need to keep this format, it have to stay selectionnable.
I saw jspdf but it seems hard with SVGs.
So, have you got an idea to do this?
Just for information I work with Phonegap / Angular js on mobile platforms.

How add custom content HighCharts PDF export?

I am generating a graph and html table with graph related info in a collapsible div.
Now the problem is I need to add the div content to my PDF export and not just the Graph, I see that there is a chart.exportDivElements but I could not find a related sample on how to use it.
Anybody has an idea about this? or an alternate to export highchart and a specific div to PDF via javascript?
I implemented the export server and saved the svg file (did away with the convert to jpg/png code as was not needed) to the server and used tcpdf to generate PDF with svg and required content, it was a bit hard to understand how to export server worked by got my head around and worked very well.
You can't. The export server exports the chart SVG, not any arbitrary html content of the page. A possible solution is to the alter the export server and introduce an extra POST parameter 'customHtml'. In the phantomJS script you have to detect if the parameter is set and write the tablecontent to the page before it is rendered.

Categories