Convert a long HTML page to PDF persisting CSS - javascript

I have tried JSPDF and HTML2Canvas for this. While the HTML is rendered successfully, its CSS is entirely messed up. I also read somewhere that html2canvas doesn't work with long pages.
Can anyone provide me a simple Javascript code that takes DOM element and generates its PDF and also maintains its CSS? I would really appreciate it. Thanks.

Related

Google page speed issue with "Prioritize visible content"

In Google Page speed I receive a comment to "Prioritize visible content" this appears to be a recent change to the page speed algorithm. In order to try and understand the problem, I created a simple page with only one image and nothing else in the HTML (under my domain), and I still see the same message to "prioritize visible content."
The only way I found to eliminate the error was to convert the image to Base64 and place the image inside the HTML. I think this is not a good solution to the problem, as it will make the HTML heavy and slow the page down.
Are there any other suggestions to solve this problem? Thanks
Usualy this issue shows when you have a lot of external javascript or css files needed by your page to render properly. The ideal solution that eliminates the issue is when you have images and css neded for "above the fold" part of your page placed inline in your HTML document. This allows browser to render visible part of the page immediatelly without making additional requests.
There are different ways how you can achieve this. One way is to load all your css and js asynchronously and inline part of css and js neded for "above the fold" area.
The reason why this issue appears in your test case could be that image takes comparable time to load to the HTML page itself.
You can read more about possible fixes in google documentation on this issue https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent?hl=en

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.

Generate PDF of a section of a php page once rendered into HTML and CSS and account for pdf page-breaks

The system I am working on has a questionnaire in it and then shows the responses to the admin in a nice report on screen. I need to create functionality that turns the on screen report into a pdf, similar to how the browser generates a pdf of the page when you select print. Although I need to only turn a section of the page into pdf. And it would be ideal to be able to alter the HTML so that the pdf page breaks don't interfere with the presentation of the report.
You can download a pdf of how the report looks, generated by the browser functionality. This is just an example, I need the pdf to be generated by a link or button and not include the whole page (the top part in this case).
I have tried some php HTML to pdf generators, but it's difficult because the HTML is dynamically generated so I'm not sure how to send all the HTML, once rendered, to the page that creates the pdf.
To overcome the page breaks, I've considered using javascript or jquery to read the height of the div of each question within the report and then write a simple script to calculate if the next div will fit on the page and if not add a margin on top of that div so that it starts on a new page.
What software can I use to generate the pdf, given these requirements? Either php or javascript. Appreciate the help.
Have you considered Snappy for PHP? It makes use of wkhtmltopdf behind the curtains to convert any HTML document into PDF.
We are using it and it works great.
https://github.com/KnpLabs/snappy
You could try mpdf and use the page-break-inside: avoid property which is actually a CSS property. I have not used this, but it might be what you're looking for.
Looks like you can add this property to the <div> and <table> tags (mPDF Supported CSS).

Programmatically add all Css stlyings from external CSS stylesheets to the html's <head> tag

I am using a python library to convert HTML page into PDF.
It does it correctly, except it only handles inline styling. It does not reflect the styling applied to DOM elements using external style sheets.
So, as a solution I am thinking of adding those CSS styling from all the external CSS stylesheets into the head tag of the html file and then send it to get converted into pdf.
But, I am not sure how? Can anyone give me any ideas or atleast suggestion on how to go around fixing that? Or, if they know a better solution.
Much appreciate
Is the python running outside or client-side? You can examine the solution here # http://www.xportability.com/XEPOnline/FOTestSuite.html. While this does a lot more, you can reach through that page to the included Javascript. Look for flattenstyle.js for inspiration.
Because our handling is different, we actually copy a selected div element to another hidden div and "flatten" the style by extracting styles we want. What you could do is run such a javascript on page load and save out the div and not destroy it, then you have most all the print styling in the HTML.

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.

Categories