How to generate a pdf from html web page?

Question

I'm looking for a library to transform my web page into a PDF file after click event from a button. I'm trying jspdf, but it prints without the CSS, how can I make this using JavaScript/jQuery and keep my CSS? Or another CSS that I can choose?

Solution 1

There is a new jQuery + cloud solution that will render any HTML page and its CSS (including print media rules) to PDF. The solution is setup to print any region of your webpage, you just tell the Formatter which container element you want to print and the library does the rest. What you get back is an embeddable PDF or the backend will push back a PDF for download.

Here's your library (GitHub):
https://github.com/Xportability/css-to-pdf

Here's your fiddle:
http://jsfiddle.net/kstubs/jrtM5/

Here's a working demo:
http://xep.cloudformatter.com/doc/

Currently there are not useage instructions, but following along with the samples (view source) should be pretty self-explanatory (look for the Print It buttons) and here is, more or less the additional options/parameters that the Format method understands.

options 
{
    pageWidth: "8.5in",             
    pageHeight: "11in", 
    pageMargin: ".25in", 
    pageMarginTop: "1in",
    pageMarginRight: "1in",
    pageMarginBottom: "1in",
    pageMarginLeft: "1in",
    render: ("none"|"newwin<default>"|embed"|"download<default IE>"),
    foStyle: { 
        // puts fo style attributes on the root, ex. fontSize:14px
        foStyleName: 'value', ...
    }           
}

Here is list of CSS attributes that are currently supported.

[
    'lineHeight', 
    'alignmentBaseline', 
    'backgroundImage', 'backgroundPosition', 'backgroundRepeat', 'backgroundColor',
    'baselineShift', 
    'border',
    'borderWidth', 'borderColor','borderStyle',
    'borderTop','borderLeft','borderRight','borderBotttom',
    'borderTopWidth','borderTopStyle','borderTopColor', 
    'borderBottomWidth','borderBottomStyle','borderBottomColor',
    'borderLeftWidth','borderLeftStyle','borderLeftColor',
    'borderRightWidth','borderRightStyle','borderRightColor',
    'borderCollapse',             
    'clear', 'color', 
    'display', 'direction', 'dominantBaseline', 
    'fill', 'float', 
    'fontStyle', 'fontVariant', 'fontWeight', 'fontSize', 'fontFamily', 
    'listStyleType', 'listStyleImage', 'letterSpacing', 
    'marginTop', 'marginBottom', 'marginLeft', 'marginRight','orphans', 
    'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',
    'pageBreakAfter', 'pageBreakBefore', 
    'tableLayout', 
    'textAlign', 'textAnchor','textDecoration', 'textIndent', 'textTransform', 
    'verticalAlign',
    'widows', 'wordSpacing', 'width'
]

Hope this helps!

Solution 2

try this npm package htmlto.It creates PDF from html with CSS styling

var htmlTo = require('htmlto')

htmlTo.pdf('./public/html/report.html','./public/pdf/report.pdf',{width: 2480, height: 3508})

install:

npm install -S htmlto

npm install -S phantom

*you can also specify the dimensions.phantom version ^4.0.3 and node version v6.5.0 https://www.npmjs.com/package/htmlto

Solution 3

I have created a simple & very easy to use API that uses the snappy library, based on the wkhtmltopdf webkit-based CLI, in order to convert an HTML page from the URL to PDF. Here is the Github repo: https://github.com/Dellos7/dhtml2pdf

This is an example of how to use it from an anchor tag. This will show the generated PDF of the https://www.github.com site in a new browser tab:

<a href="https://dhtml2pdf.herokuapp.com/api.php?url=https://www.github.com&result_type=show" target="_blank">Show PDF</a>

Example of how to use it to download the PDF:

<a href="https://dhtml2pdf.herokuapp.com/api.php?url=https://www.github.com&result_type=download&file_name=my_pdf">Download PDF</a>

With this solution you don't even need to use javascript in order to generate your PDF.

But if you still need to do it using javascript, you can do it like this:

document.getElementById("your-button-id").addEventListener("click", function() {
    var link = document.createElement('a');
    link.href = 'https://dhtml2pdf.herokuapp.com/api.php?url=https://www.github.com&result_type=download';
    link.download = 'file.pdf';
    link.dispatchEvent(new MouseEvent('click'));
});

In the repo I also explain how to very easily clone & deploy your own API in Heroku so you can mantain the API yourself and not to depend on external services.

Comments

[Kevin Brown]

Poke around here ... xep.cloudformatter.com/doc

[Alejandro Hinestrosa]

they explain a lot there, but i cant find any script or how to use it

[Kevin Brown]

I asked one of the developers to post instructions for you. The JS is on Github as are that sample page's source to see how.

[Alejandro Hinestrosa]

how i find it on github?

[rajeev]

hello, I tried to use this library, but i am getting error: Missing or invalid selector'. now my selector (ID) is good i know, but i do not have any CSS with media-print or something liek that. HTML page is styled using regular CSS. is that the issue?

[kstubs]

Thats a custom error thrown by xepOnline plugin. The selector should be in the form of "#ContainerID", or any valid jQuery selector. Which version of the xepOnline plugin are you using? Styling with regular CSS is fine.

[user1535501]

this appears to use a external service backend, and thus might not be approperiate for sensitive content

[kstubs]

Correct @pvgoddijn . This free version of the software and public service is not intended for content sensitive data. The service is available for custom and private installation behind ones own network.

[Matt]

I agree with the two comments above - Use caution. This is rendering on a server.

[Andrew]

"JQuery solution" - liar.

[Hugo Quiñónez]

can a generate a link to download the result PDF?

[dev07]

save the PDF in public path of your app,It can then be downloadable

[John Max]

Hello David. Your project was awesome but it is no longer working. Can you please fix it ? We will show appreciation.