WKHTMLTOPDF

Question

我有一个网页数据，我使用 wkhtmltopdf 0.12.3.2（带有修补的 qt）导出为 pdf。

当数据显示在屏幕上时，它看起来与我希望的完全一样，如下所示：

数据渲染成pdf后，pdf上出现"ghost"边框，如下图：

而且当我把数据打印出来的时候，页面上多了'ghost'个边框，如下图：

如何防止这些 'ghost' 边框出现？ 我尝试了很多选项，但我找不到解决方案。

我试过outline: #fff solid medium !important;，但是没有效果。我也试过 box-shadow: 0px 0px 1px #fff; 但这没有效果。

这个问题似乎只出现在 CSS border: double 值上。

这是我的 html 代码：

<div class="resumeStyleStandardHeadings8" dir="ltr" style="direction: ltr;">Summary Details</div>

这是我的 css 代码：

.resumeStyleStandardHeadings8 {
    background: #000;
    border-left: 10px double #fff;
    border-bottom: 10px double #fff;
    color: #fff;
    display: block;
    font-weight: 700;
    margin-bottom: 2px;
    outline: none;
    overflow: hidden;
    padding: 2px;
    padding-bottom: 5px;
    padding-top: 5px;
    page-break-inside: avoid;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
    width: 100%
}

Answer 1

使用 :before 修复 wkhtmltopdf 双边框和背景颜色导致阴影/模糊的问题。盒模型、渲染、抗锯齿、错误

<div class="resumeStyleStandardHeadings8" dir="ltr" style="direction: ltr;">Summary Details</div>


.resumeStyleStandardHeadings8:before{
  content: " ";
  position: absolute;
  z-index: -1;
  width:100%;
  height:36px;
  margin-left:-9px;
  margin-top:-5px;
  background:#000;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
.resumeStyleStandardHeadings8 {
    display: block;
    outline: none;
    overflow: hidden;
    page-break-inside: avoid;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
    width: 100%;
    margin-bottom: 2px;
    padding: 5px 2px;
    background: #000;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

WKHTMLTOPDF - 边框出现在 pdf 上

WKHTMLTOPDF - borders appear on pdfs

html

css

pdf