45

我正在一个使用 ruby​​ on rails(3.1) 的项目中工作。我的要求是从 html 内容生成 pdf。所以我使用pdfkit gem。

在某些页面中，单行字符在页面之间部分切开。当我使用 pdfkit gem 将 html 转换为 pdf

wkhtmltopdf 版本：wkhtmltopdf -- 0.11.0 rc1

操作系统：Linux CentOS 5.5

在下图中显示了页面之间部分剪切的字符。

请提出解决方案。

示例 1

在此处输入图像描述

示例 2

在此处输入图像描述

4

11 回答 11

15

我的桌子确实有这个问题：

在此处输入图像描述

然后我将它添加到我的 CSS 中：

table, img, blockquote {page-break-inside: avoid;}

这解决了问题：

在此处输入图像描述

于 2015-02-27T14:20:48.720 回答
11

我刚刚遇到了这个问题，发现了一些可以为我解决问题的东西。在我的特殊情况下，有 div 带有display: inline-block; margin-bottom: -20px;. 一旦我将它们更改为阻止并重置边距底部，线条分割就消失了。YMMV。

于 2012-08-28T18:54:50.197 回答
9

根据我发现的一些文档（请参阅分页符），这是一个已知问题，建议使用 CSS 分页符插入分页符（假设您使用的是 QT 的修补版本）：

WebKit 当前的分页算法还有很多不足之处。基本上 webkit 会将所有内容渲染成一个长页面，然后将其切割成页面。这意味着，如果您有两列文本，其中一列垂直移动了半行。然后 webkit 将一条线切成碎片显示在一页上的上半部分。下半部分在另一页。它还会将图像一分为二，依此类推。如果您使用的是 QT 的补丁版本，您可以使用 CSS page-break-inside 属性来解决这个问题。这个问题没有简单的解决方案，在解决这个问题之前，请尝试组织您的 HTML 文档，使其包含许多可以干净地剪切页面的行。

另请参阅：http ://code.google.com/p/wkhtmltopdf/issues/detail?id=9 、 http ://code.google.com/p/wkhtmltopdf/issues/detail?id=33和 http:// /code.google.com/p/wkhtmltopdf/issues/detail?id=57。

于 2012-01-09T13:04:24.217 回答
5

就我而言，通过注释掉以下 css 解决了这个问题：

html, body {
  overflow-x: hidden;
}

一般来说，检查是否有任何标签overflow设置为hidden并将其删除或设置为visible。

顺便说一句，我wkhtmltopdf version 0.12.2.1在 Windows 8 上使用。

于 2015-04-23T06:12:13.017 回答
1

https://github.com/ArthurHub/HTML-Renderer/issues/38

                    **var head = "<head><style type=\"text/css\"> td, h1, h2, h3, p, b, div, i, span, label, ul, li, tr, table { page-break-inside: avoid; } </style></head>";**

                    PdfDocument pdf = PdfGenerator.GeneratePdf("html>" + head + "<body>" +  m42Notes + "</body></html>", configurationOptions);
于 2020-10-07T18:20:34.567 回答
1

我解决了添加边距顶部和边距底部的问题，如下所示：

$this->get('knp_snappy.pdf')->generateFromHtml($html, $pdfFilepath, [
        'default-header' => false,
        'header-line' => false,
        'footer-line' => false,
        'disable-javascript' => true,
        'margin-top' => '3mm',
        'margin-bottom' => '3mm',
        'margin-right' => '5mm',
        'margin-left' => '5mm',
        'orientation' => 'Landscape',
    ], true);
于 2020-04-01T06:59:41.983 回答
1

这很旧，但希望能对某人有所帮助-我也遇到了问题，尝试了所有方法-甚至求助于提到的旧版本（12.1）但无济于事。我一直在调整 css 来玩，试图在任何地方都避免分页符，但没有太大进展。然后我调整了我的 html 根 div 上的 css，并修复了它。我做了很多调整，试图让它工作，所以我不能 100% 确定，但我相信问题在于它设置为 'display:table'，margin: 0 auto 和主外部 div 上的特定宽度。一旦我删除它，它就开始工作并且不会切断中间的图像或表格。然后 page-break-inside: Avoid 在那之后按预期工作。

我相信最终代码会尽可能准确地猜测每个页面有多少像素，以及您的内容到底在哪里（精确到像素）。我们必须通过尽可能多地删除其中的奇数 css 来使库更容易检测到这一点，因此尽可能简单地计算到内容所在的像素。这是我的猜测。

于 2020-01-17T19:58:03.040 回答
0

剪切文本问题是一个已知的 webkit 问题，似乎开发人员在 wkhtmltopdf 中找到了解决方案。更新到 0.12.1 将解决剪切文本问题（如果您不想浪费时间编译，您可以从这里获取二进制文件：https ://github.com/h4cc/wkhtmltopdf-amd64 ）。

于 2014-07-12T17:10:09.510 回答
0

已经忍受了几个月，终于找到了解决我的情况的方法。我在我正在转换的 html 文件中使用 github css 样式表，code如果跨多个页面的块会得到文本剪切。什么都没有，只是被切成了两半。

页面底部：

页面底部

下一页开始：

下一页的开始

所以在 github 样式表中溢出设置为自动<pre>标记。

.markdown-body .highlight pre,
.markdown-body pre {
  padding: 16px;
  overflow: auto;
...

将溢出属性切换为隐藏为我解决了它！

.markdown-body .highlight pre,
.markdown-body pre {
  padding: 16px;
  overflow: hidden;

认为我尝试了此页面上的所有其他答案，但这已为我解决。希望它可以帮助别人:)

于 2021-02-28T15:48:54.190 回答
0

我在网上搜索了几个星期，试图解决这个问题。我找到的解决方案都没有对我有用，但有其他方法。

我有一个两列布局，其中文本被中间文本截断。在破碎状态下，我的基本结构是这样的：

@media print {
  * {
    page-break-inside: avoid;
    page-break-after: avoid;
    page-break-before: avoid;
  }
}
.col-9{
  display: inline-block;
  width: 70%;
}
.col-9{
  display: inline-block;
  width: 25%;
}

<div class="col-9">
  [a lot of text here, that would spill over multiple pages]
</div>
<div class="col-3">
  [a short sidebar here]
</div>

我通过将其更改为：

@media print {
  * {
    page-break-inside: avoid;
    page-break-after: avoid;
    page-break-before: avoid;
  }
}

.col-9{
  display: block;
  float: left;
  width: 70%;
}
.col-9{
  display: block;
  float: left;
  width: 25%;
}
.clear{
  clear: both;
}

<div class="col-9">
  [a lot of text here, that no longer split mid-line.]
</div>
<div class="col-3">
  [a short sidebar here]
</div>
<div class="clear"></div>

由于某种原因，该工具无法处理显示：inline-block setup。它适用于花车。我正在运行版本 0.12.4。

于 2018-07-10T19:42:49.337 回答
0

通过从https://github.com/wkhtmltopdf/packaging/releases/0.12.6-1安装 wkhtmltox_0.12.6-1.bionic_amd64.deb （适用于 Ubuntu），我能够找到解决此问题的方法

更新此 wkhtmltox 包后，表格和文本将不再在页面末尾截断。此修复为我引入了一个不同的问题，现在生成的 pdf 没有样式。例如 font-family、font-size 甚至文本对齐方式都消失了，并且正在使用一些默认设置。

于 2021-06-08T10:04:21.980 回答