如何从html网页生成pdf？
我正在寻找一个库来转换我的网页后，从一个按钮点击事件为PDF文件。我正在尝试jspdf，但它打印没有CSS，我如何使用JavaScript/jQuery并保留我的CSS？或者另一个我可以选择的CSS？
回答 3
Stack Overflow用户
发布于 2014-07-31 05:11:22
有了一个新的jQuery +云解决方案，可以将任何HTML页面及其CSS (包括印刷媒体规则)呈现为PDF。解决方案设置为打印网页的任何区域，您只需告诉格式化程序要打印哪个容器元素，其他工作由库完成。你得到的是一个可嵌入的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'
]希望这能有所帮助！
Stack Overflow用户
发布于 2017-05-20 17:24:34
试试这个npm包htmlto.It用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
*您还可以指定dimensions.phantom版本^4.0.3和节点版本v6.5.0 https://www.npmjs.com/package/htmlto
Stack Overflow用户
发布于 2018-02-04 21:17:40
我已经创建了一个简单易用的应用程序接口，它使用snappy库，基于PDF的CLI，以便将wkhtmltopdf页面从URL转换为PDF。这是Github存储库：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'));
});在代码库中，我还解释了如何非常容易地在Heroku中克隆和部署您自己的应用程序接口，这样您就可以自己管理应用程序接口，而不是依赖于外部服务。
https://stackoverflow.com/questions/25046187
复制相似问题