Question

我正在生成一个自动填充的PDF，从我给出的inDesign布局克隆。此布局使用表格，表格上有0.5pt边框。使用wkhtmltopdf时，这些边框无法正确呈现，因为webkit不需要超过0.8pt / 1px的行。

我尝试使用0.8px的解决方法（屏幕上100％不显示，400％正确显示高度），直接0.5pt，或使用1px盒子阴影，这似乎没有给我正确的厚度，因为sub-1px或sub-0.8pt的行不会渲染到我的PDF文件中，而1px的box-shadows也会给我带来同样的问题。

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

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

提前谢谢！

Answer 1

解决。如果由wkhtmltopdf处理，则不可能使用CSS。

我找到的第一个解决方法是使用缩放渲染页面：A3尺寸为1.41，然后在A4中以缩放：1 /（1.41）渲染。那太臃肿了。

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

Answer 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.5px线（无论在真实的打印世界中意味着什么），这都有效。更细粒度的控制需要更大的比例，我还没有尝试过。

理论上，将正文字体大小设置为正常值的某个倍数相当容易，然后使用rems使css更容易在眼睛上进行缩放。

编辑：

我可以确认缩放10倍然后转换效果非常好，可以生成精确到0.1px的边框/线条。这是一些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中定义所有布局尺寸：例如border：0.05rem（0.5px最终结果，在这种情况下为1rem = 10px）

Answer 3

在CSS中设置一个体宽为我做了。

我必须在100 dpi时设置800px的宽度以获得1px边框

使用wkhtmltopdf，Css边界小于4px @ 300dpi

3 个答案: