wkhtmltopdf跨页边框缺失的解决方法

使用wkhtmltopdf生成PDF时，带边框的内容跨页后，边框常常出现缺失的情况，例如底部或顶部边框不完整。本文将提供解决此问题的有效方法。

问题表现：如同示例图片所示，第一页底部边框缺失，后续页面顶部边框也同样缺失，随着页面增多，问题越发明显。

根本原因：wkhtmltopdf的页面分割机制导致。wkhtmltopdf将文档分割成多个独立的页面，每个页面对应一个HTML元素。跨页时，边框元素可能被分割，导致显示不完整。

立即学习“前端免费学习笔记（深入）”；

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

解决方案：确保每个页面的HTML元素都包含完整的边框元素。以下两种方法可以有效解决此问题：

1. CSS border-collapse属性： 设置border-collapse: collapse;，可以合并相邻单元格的边框，从而保证跨页时边框的完整性。

   <code class="css">p {
     border: 1px solid black;
     border-collapse: collapse;
   }</code>

2. HTML <div>元素包裹： 使用<code><div>元素包裹需要边框的内容，并为<code><div>元素设置边框。这样可以确保边框在<code><div>元素内完整显示，即使跨页也不会出现缺失。 <pre class="brush:php;toolbar:false;">&lt;code class=&quot;html&quot;&gt;&lt;div style=&quot;border: 1px solid black;&quot;&gt; &lt;p&gt;内容...&lt;/p&gt; &lt;/div&gt;&lt;/code&gt;</pre> <p>通过以上方法，可以有效解决wkhtmltopdf跨页边框不完整的问题，生成美观的PDF文档。</p> </div>