26

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?

Angel Politis
  • 10,955
  • 14
  • 48
  • 66
Alejandro Hinestrosa
  • 491
  • 4
  • 11
  • 23

3 Answers3

12

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!

Samuel Liew
  • 76,741
  • 107
  • 159
  • 260
kstubs
  • 808
  • 4
  • 18
  • 1
    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? – rajeev Dec 03 '14 at 16:55
  • 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. – kstubs Dec 04 '14 at 02:25
  • 14
    this appears to use a external service backend, and thus might not be approperiate for sensitive content – pvgoddijn Dec 08 '14 at 09:56
  • 1
    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. – kstubs Dec 08 '14 at 20:27
  • 3
    I agree with the two comments above - Use caution. This is rendering on a server. – Matt Dec 02 '15 at 22:57
  • "JQuery solution" - liar. – Andrew Nov 29 '17 at 22:20
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

dev07
  • 346
  • 2
  • 8
2

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.

David López
  • 488
  • 3
  • 8