使用 wkhtmltopdf 小于 4px @300dpi 的 CSS 边框答案

【问题标题】：Css border smaller than 4px @300dpi using wkhtmltopdf使用 wkhtmltopdf 小于 4px @300dpi 的 CSS 边框
【发布时间】：2018-01-24 19:32:01
【问题描述】：

我正在生成一个自动填充的 PDF，它是从我获得的 inDesign 布局中克隆出来的。此布局使用表格，表格边框为 0.5pt。使用 wkhtmltopdf 时，这些边框无法正确呈现，因为 webkit 不希望线条细于 0.8pt/1px。

我尝试使用解决方法，例如 0.8px（屏幕上 100% 不显示，400% 时正确高度）、直接 0.5pt 或使用 1px 框阴影，这些似乎都没有给我正确的厚度，因为sub-1px 或 sub-0.8pt 的行没有呈现到我的 PDF 文件中，1px 的框阴影给了我同样的问题。

编辑：我用来生成 PDF 的命令：wkhtmltopdf.exe -T 0 -B 0 -L 0 -R 0 --dpi 300 --disable-smart-shrinking <input> <output>

我不反对光学解决方法。这是我的问题的预览：

提前谢谢你！

【问题讨论】：

标签： css printing wkhtmltopdf

【解决方案1】：

解决了。如果由 wkhtmltopdf 处理，则无法使用 CSS。

我发现的第一个解决方法是在 A3 纸张大小中使用 zoom:1.41 呈现页面，然后在 A4 中以 zoom:1/(1.41) 呈现页面。那是相当臃肿。

所以，我用 SVG 精灵替换了我的边框，高度/宽度为 0.2 毫米。它允许我跳过 A4->A3->A4 转换，并且仍然使用 --disable-smart-shrinking 选项，即使我的标记现在很难看。

【讨论】：

您能否提供更多信息，例如代码或任何参考链接？我也陷入了类似的问题
您好，我无法发布链接，因为它是我的一位客户的内部系统的一部分。我没有使用 svg，而是使用渐变的 span 元素：标记：<span class="line_emu"></span> CSS：display:block;width:100%;height:1.2pt;background: -webkit-linear-gradient(top, rgb(255,255,255) 0%, rgb(255,255,255) 20%,rgb(130,128,130) 22%, rgb(0,0,0) 52%, rgb(130,128,130) 84%,rgb(255,255,255) 85%, rgb(255,255,255) 100%); 我给了这个高度以 pt 而不是 px 以避免十进制值
你好@Lucascvs！终于有人遇到同样问题了！尽管如此，我注意到“别名”颜色给出了正确的行为（即边框：1px 纯黑色；）。如果我尝试使用另一种颜色（例如#EBEBEB），我会在桌子上得到较厚的边框。你有没有找到任何“不那么难看”的解决方案？我不太确定如何实施您的解决方案以获得完整的边框表...无论如何，谢谢。
@DavidB。嗨，我停止使用 wkhtmltopdf 处理小于 A3 的格式，因为 phantomJS/headless chrome 可以呈现更好的细节和 css 转换。但是，为了使用这种方法渲染表格，我在 table、thead、tfoot、tr 和 tds 上使用了之前/之后的伪元素来实现这些边框。我现在尽量避免在大格式上出现这些细线。

【解决方案2】：

我发现的解决方法是将文档中的所有像素值缩放 2，然后应用 css 变换将其全部缩小到正确的大小。

//original

body{ width: 210mm; }
p{ font-size:12px; }
.bordered{ border-width: 0.5px; ) //didn't work

//hacked

body{ width: 420mm; transform: scale(0.5); transform-origin: 0 0; }
p{ font-size:24px; }
.bordered{ border-width: 1px; }

渲染引擎在执行 css 转换之前必须解析所有值并舍入到最接近的整数。

如果您需要一条 0.5 像素的线（无论这在现实世界中意味着什么！），这显然是可行的。更精细的控制需要更大的比例，我还没有尝试过。

理论上，将正文字体大小设置为正常值的倍数是相当容易的，然后使用 rems 使 css 更易于查看并更快地缩放。

编辑：

我可以确认，缩放 10 倍然后向下转换可以很好地生成精确到 0.1 像素的边框/线条。这是一些scss：

$final_width: 210mm;
$final_height: 297mm;
$scale_factor: 10;

$page_width: #{$scale_factor * $final_width};
$page_height: #{$scale_factor * $final_height};

html{
    padding: 0;
    margin: 0;
    font-size: #{$scale_factor*10}px;
}

body{
    transform: scale(#{1/$scale_factor});
    transform-origin: 0 0;
    width: $page_width;
    height: $page_height;
    margin: 0;
    margin-bottom: -$page_height;

...

以 rems 定义所有布局大小：例如边框：0.05rem（0.5px 最终结果，在这种情况下为 1rem = 10px）

【讨论】：

【解决方案3】：

在 CSS 中设置正文宽度对我来说是这样的。

我必须在 100 dpi 下设置 800 像素的宽度才能获得 1 像素的边框

【讨论】：