wkhtmltopdf跨页边框不完整怎么办？

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

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

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

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

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

BetterYeah AI

基于企业知识库构建、训练AI Agent的智能体应用开发平台，赋能客服、营销、销售场景 -BetterYeah

110

查看详情

解决方案：确保每个页面的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>元素内完整显示，即使跨页也不会出现缺失。 <div class="code" style="position:relative; padding:0px; margin:0px;"><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>

   登录后复制
   </div> <p>通过以上方法，可以有效解决wkhtmltopdf跨页边框不完整的问题，生成美观的PDF文档。</p> </div>