WKHTMLTOPDF - borders are displayed in pdf files

I have a data web page that I export to pdf using wkhtmltopdf 0.12.3.2 (with qt fixed).

When the data is displayed on the screen, it looks exactly the way I want it to be displayed, as shown below:

enter image description here

When data is transferred to pdf, a ghost appears in pdf format, as shown below:

enter image description here

And when I print the data, more ghost borders appear on the page, as shown below:

enter image description here

How to prevent the appearance of these borders "ghost"? I tried many options, but the solution eludes me.

I tried outline: #fff solid medium !important;, but it has no effect. I also tried box-shadow: 0px 0px 1px #fff;, but this has no effect.

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%
}
+4
1

:before wkhtmltopdf, drop-shadow/blur. box-model, , ,

<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;
}
+2

Source: https://habr.com/ru/post/1677889/


All Articles