如何从html网页生成pdf

Question

我正在寻找一个库将我的网页转换成PDF文件后，从按钮单击事件。我正在尝试jspdf，但它没有CSS打印，我如何使用JavaScript/jQuery并保持我的CSS?或者我可以选择的其他CSS ?

Answer 1

有一个新的jQuery +云解决方案，可以将任何HTML页面及其CSS(包括打印媒体规则)呈现为PDF。解决方案是设置为打印网页的任何区域，您只需告诉Formatter要打印哪个容器元素，然后库就会完成其余的工作。你得到的是一个可嵌入的PDF文件，否则后端会推送一个PDF文件供下载。

这是你的库(GitHub):
https://github.com/Xportability/css-to-pdf

这是你的小提琴:
http://jsfiddle.net/kstubs/jrtM5/

下面是一个工作演示:
http://xep.cloudformatter.com/doc/

目前没有使用说明，但是跟随示例(查看源代码)应该是非常不言自明的(查找Print It按钮)，这里或多或少是Format方法理解的附加选项/参数。

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', ...
    }           
}

这是当前支持的CSS属性列表。

[
    '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'
]

希望这对你有帮助!

Answer 2

试试这个npm包htmlto。它用CSS样式从html创建PDF

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

安装:

npm install -S htmlto

npm install -S phantom

*也可以指定尺寸。幻影版本^4.0.3和节点版本v6.5.0 https://www.npmjs.com/package/htmlto

Answer 3

我创建了一个简单的&非常容易使用的API，它使用了snappy库，基于wkhtmltopdf基于webkit的CLI，以便将HTML页面从URL转换为PDF。这里是Github的repo: https://github.com/Dellos7/dhtml2pdf

这是一个如何在锚标记中使用它的例子。这将在一个新的浏览器选项卡中显示https://www.github.com站点生成的PDF:

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

如何使用它下载PDF的示例:

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

有了这个解决方案，你甚至不需要使用javascript来生成PDF。

但是如果你仍然需要使用javascript，你可以这样做:

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'));
});

在repo中，我还解释了如何非常容易地克隆&在Heroku中部署您自己的API，这样您就可以自己维护API，而不必依赖外部服务。