如何从html网页生成pdf? [关闭]

Posted

技术标签:

【中文标题】如何从html网页生成pdf? [关闭]【英文标题】:How to generate a pdf from html web page? [closed] 【发布时间】:2014-09-22 15:32:42 【问题描述】:

我正在寻找一个库,以便在按钮单击事件后将我的网页转换为 PDF 文件。 我正在尝试jspdf,但它在没有 CSS 的情况下打印,我怎样才能使用javascript/jQuery 制作它并保留我的 CSS?还是我可以选择的其他 CSS?

【问题讨论】:

戳这里...xep.cloudformatter.com/doc 他们在那里解释了很多,但我找不到任何脚本或如何使用它 我请一位开发人员为您发布说明。 JS 在 Github 上,示例页面的源代码也是如此。 我如何在 github 上找到它? 【参考方案1】:

我创建了一个简单且非常易于使用的 API,它使用基于 wkhtmltopdf webkit-based CLI 的 snappy 库,以便将 HTML 页面从 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'));
);

在 repo 中,我还解释了如何在 Heroku 中非常轻松地克隆和部署您自己的 API,这样您就可以自己维护 API 而无需依赖外部服务。

【讨论】:

你好大卫。你的项目很棒,但它不再工作了。你能修好吗?我们会表示感谢。【参考方案2】:

有一个新的 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'
]

希望这会有所帮助!

【讨论】:

你好,我尝试使用这个库,但出现错误:缺少或无效的选择器'。现在我的选择器(ID)很好,我知道,但我没有任何带有媒体打印或类似内容的 CSS。 HTML 页面使用常规 CSS 设置样式。是这个问题吗? 这是 xepOnline 插件抛出的自定义错误。选择器应采用“#ContainerID”或任何有效的 jQuery 选择器的形式。您使用的是哪个版本的 xepOnline 插件?使用常规 CSS 进行样式设置很好。 这似乎使用外部服务后端,因此可能不适合敏感内容 正确@pvgoddijn。该软件和公共服务的免费版本不适用于内容敏感数据。该服务可用于在自己的网络后面进行自定义和私人安装。 我同意上面的两个 cmets - 请谨慎使用。这是在服务器上渲染。【参考方案3】:

试试这个 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

*你也可以指定dimensions.phantom版本^4.0.3和node版本v6.5.0https://www.npmjs.com/package/htmlto

【讨论】:

可以生成一个链接来下载结果PDF吗? 将PDF保存在应用的公共路径中,即可下载

以上是关于如何从html网页生成pdf? [关闭]的主要内容,如果未能解决你的问题,请参考以下文章

如何在网页中显示PDF文件

如何通过在html5中单击按钮将网页转换为pdf

HTML文件如何生成?

html文件怎么转换成pdf文件

PHP 生成PDF

怎么下载从网页中链接弹出来的pdf