How to generate a pdf from html web page? [closed]

问题:

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?

回答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!

回答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

回答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.