将 HTML 页面转换为 PDF [关闭]答案

【问题标题】：converting an HTML page to a PDF [closed]将 HTML 页面转换为 PDF [关闭]
【发布时间】：2018-04-12 20:48:05
【问题描述】：

从概念上讲，这很简单。

我有一个 HTML 页面。我想要 PDF 格式的。我调出 Foxit 的 PhantomPDF 并转换文件。

问题：

它太宽了，侧面被剃掉了（主要是在右边）
它不知道它在读什么，所以我用分页符将单词水平切成两半。

如何成功地将 HTML 页面转换为 PDF 并避免这些问题？

谢谢。

【问题讨论】：

作为参考，我也直接从浏览器中转换了它，它看起来正确，除了它上面有我不想要的日期时间戳和网址。
这里的问题是您正试图从 Web 布局中获取“页面布局”结果。他们真的不匹配。 HTML 到 PDF 的转换通常很困难，因为您需要以不同的方式指定布局。您的演示文稿越复杂，您就越有可能需要特定于报告的工具/库/api，而不是简单的转换器。
尽管不同意关闭此问题的原因（尤其是第二个原因 - 我就是这样做的！），但无需重写。我已经找到答案了。

标签： pdf pdf-generation foxit

【解决方案1】：

所以这个问题的答案最终是几件事的结合。

1) 我必须编辑 CSS 以确保图像实际上保持在页面“100%”的范围内。我添加了 CSS 以确保所有图像都达到 90%。这可以防止页面上的任何左右滚动，并防止 PDF 中的任何内容被截断。

2）我进入浏览器文件菜单的页面设置部分，进入“页边距和页脚”选项卡，其中有一些地方写着日期/网址/页码等内容。我把所有这些都删掉了，一切都很好。

3) 最棘手的部分是确保它在正确的位置拆分页面。我终于了解了名为page-break-before 和page-break-inside 的CSS 属性。我用这些集合创建了类，如下所示：

// Creates a page break in the PDF right before element with this class
.pagebreak{
    page-break-before: always;    
}

// Doesn't allow the contents of a div with this class to split across pages.
.nobreak{
    page-break-inside: avoid;    
}

并且，当转换为 PDF 时，它会读取这些内容并按照我的意愿布置页面。这有点乏味，但我最终得到了我想要的确切 PDF！

【讨论】：