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

柔情痞子 提交于 2019-11-27 11:36:10
kstubs

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!

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

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.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!