18

我正在使用 wkhtmltopdf(它使用 Webkit 渲染引擎)将 HTML 文件转换为 PDF 文档。生成的 PDF 为 A4。换句话说,它们具有固定的尺寸,因此具有有限的宽度。

我的 PDF 中的一张表格包含图像,这些图像以类似拼图的方式错综复杂地拼凑在一起,有时会占用很多空间。

为了适应 A4 PDF 的约束中产生的难题,我正在应用 CSS 属性 -webkit-transform: scale(...);

这很好地缩放了拼图,它仍然清晰易读,但由于某种原因,它也将包含拼图的桌子推到了右边。尽管我明确地将其左边距设置为 0,但它似乎在拼图表的左侧增加了一个显着的边距。

有趣的是,我的 webkit 转换中的规模越小,左侧的边距越大。因此,例如,如果我使用 scale(0.75),则生成的左边距约为 200 像素。如果我使用 scale(0.5) ,则生成的左边距约为 400 像素。

我尝试使用绝对、固定和相对定位将拼图表向左对齐:0。我还尝试将其浮动到左侧,并将其粘贴在文本对齐设置为左侧的容器中。这些技术都不起作用。

这个左边距来自哪里以及如何删除它/解决它的任何想法?

4

1 回答 1

36

经过一番试验和错误,将以下 CSS 代码添加到拼图表中就可以了:

-webkit-transform-origin-x: 0;

此处提供有关此属性的更多信息:http: //css-infos.net/property/-webkit-transform-origin-x

更新:请参阅下面 Richar-dW 的评论以获得跨浏览器支持。

于 2012-10-23T13:18:02.370 回答