Wkhtmltopdf字符以单行形式在页面之间部分剪切

我在一个使用RubyonRails（3.1）的项目中工作。我的要求是从html内容生成pdf。所以我使用pdfkit gem

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

wkhtmltopdf的版本：wkhtmltopdf--0.11.0 rc1

操作系统：Linux CentOS 5.5

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

请提出解决办法

示例1

示例2

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

WebKit当前的分页算法还有很多需要改进的地方 渴望的基本上webkit会将所有内容呈现在一个长页面中， 然后把它切成几页。这意味着如果有两列 指文本，其中一个垂直移动半行。然后是webkit 将一行切成几段，在一页上显示上半部分。及 下半部分在另一页上。它还将把图像一分为二 等等。如果您使用的是QT的补丁版本，那么可以使用CSS 属性内部的分页符可以在某种程度上纠正这一点。没有容易的事 此问题的解决方案，在解决之前，请尝试组织您的 HTML文档，使其包含许多行，可以在这些行上编辑页面 切得干净利落

另见：， 和

---

我只是偶然发现了这个问题，并找到了解决问题的方法。在我的例子中，有一些div带有

display:inline块；边缘底部：-20px。一旦我将它们更改为块并重置边距底部，行分割就消失了。YMMV.
剪切文本问题是一个已知的webkit问题，开发人员似乎在wkhtmltopdf中找到了解决方案。更新到0.12.1将修复剪切文本问题（如果您不想在编译上浪费时间，您可以从这里获取二进制文件：）。
我的表确实存在此问题：


然后我在CSS中添加了以下内容：

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

这解决了问题：

在我的例子中，通过注释以下css解决了问题：

html, body {
  overflow-x: hidden;
} 

通常，检查是否有任何标记将溢出设置为隐藏，并将其删除或设置为可见

顺便说一句，我在Windows8上使用的是
wkhtmltopdf版本0.12.2.1
 我在互联网上搜索了几周，试图解决这个问题。我找到的解决方案中没有一个对我有效，但其他的解决方案对我有效

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

@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>

$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);

@媒体打印{
* {
内部分页符：避免；
换页后：避免；
分页符前：避免；
}
}
.col-9{
显示：内联块；
宽度：70%；
}
.col-9{
显示：内联块；
宽度：25%；
}
[此处有大量文本，可能会溢出多页]
[这里有一个简短的侧边栏]

我将其更改为：

@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>

@媒体打印{
* {
内部分页符：避免；
换页后：避免；
分页符前：避免；
}
}
.col-9{
显示：块；
浮动：左；
宽度：70%；
}
.col-9{
显示：块；
浮动：左；
宽度：25%；
}
.清楚{
明确：两者皆有；
}
[此处有大量文本，不再分割中线。]
[这里有一个简短的侧边栏]

由于某些原因，该工具无法处理显示：内联块设置。它与浮动一起工作。我正在运行0.12.4版。
这是一个旧版本，但希望能帮助一些人-我也遇到了问题，尝试了所有方法-甚至求助于前面提到的旧版本（12.1），但都没有用。我一直在调整css，尝试在任何地方加入分页符，但进展不大。然后我调整了html根div上的css，它修复了它。我做了很多调整，试图让它工作，所以我不能100%肯定，但我相信问题是它设置为“显示：表”与边距：0自动和一个特定的宽度上的主要外部div。它开始工作，而不是切断任何图像或表中行一旦我删除。然后，内部的分页符：avoid在此之后按预期工作

我相信最终代码会尽可能准确地猜测每页有多少像素高，以及内容的确切位置（一直到像素）。我们必须通过尽可能多地删除其中的奇怪css，使库能够轻松地检测到这一点，因此尽可能简单地计算内容所在的像素。这是我的猜测。
我解决了添加页边距顶部和页边距底部的问题，如下所示：

@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>

$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);


**var head=“td，h1，h2，h3，p，b，div，i，span，label，ul，li，tr，表{内部分页符：避免；}”**
PdfDocument pdf=PdfGenerator.GeneratePdf（“html>”+head+“”+m42Notes+“”，配置选项）；
我已经忍受了好几个月，终于找到了解决我的问题的办法。我在转换的html文件中使用了github css样式表，跨多个页面的
code
块会被剪切。什么都没少，只是被切成两半

页面底部：


下一页的开头：


因此，在github中，

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

将溢出属性切换为隐藏属性为我解决了这个问题

我想我尝试了这一页上的所有其他答案，但这对我来说已经解决了。希望它能帮助其他人：）
我通过从安装wkhtmltox_0.12.6-1.bionic_amd64.deb（用于Ubuntu）找到了解决此问题的方法

更新此wkhtmltox包后，页面末尾的表格和文本将不再被截断。此修复为m引入了一个不同的问题