使用Openhtmltopdf生成pdf时，将图像放置在CSS @页边距/填充之外

cvxl0en2 于 2022-12-24 发布在其他

关注(0)|答案(1)|浏览(282)

我正在使用Openhtmltopdf从html生成分页的pdf文档。我的问题是，我需要把图像放在页面的边缘，@page margin之外。在任何情况下，使用可见性、填充/边距、子元素的负边距等，@page margin之外的内容总是隐藏在边距之下。

我可以在Openhtmltopdf沙盒中重现这个问题，放置以下代码片段：

<html>
<head>
<style>

@page{
            margin: 5cm;
            border: solid;
}
</style>
</head>
<body>

<div style="font-size: 90px; position: absolute; top: 0cm; left: -1cm;">
  Hello World!
</div>

</body>
</html>

到https://sandbox.openhtmltopdf.com/上的沙盒中会产生以下结果：

正如你所猜，我的问题是“Hello world”在inner @page内容部分之外是不可见的。任何打破这一规则，使整个文本可见的方法都可能解决我的问题。我已经仔细地格式化了现有的字母，所以我很乐意保留当前的页边距定义，而不需要对其余内容进行重组。最后，我只需要把图像的pdf格式。感谢您提前任何帮助！

css

来源：https://stackoverflow.com/questions/74113633/place-image-outside-of-css-page-margin-padding-when-generating-pdf-using-openht

1条答案

按热度按时间

atmip9wb1#

如果你只想添加一张图片，你可以将它设置为页面的background-image。

<html>
<head>
<style>

@page{
    margin: 5cm;
    border: solid;
    background-image: url(image:flyingsaucer.png);
    background-position: 3cm 3cm;
    background-repeat: no-repeat;
}
div{
    font-size: 90px; 
    position: absolute; 
    top: 0cm; 
    left: -1cm;
}
</style>
</head>
<body>
<div>
  Hello World!
</div>

</body>
</html>

赞(0）回复(0）举报 2022-12-24

我来回答

使用Openhtmltopdf生成pdf时，将图像放置在CSS @页边距/填充之外

1条答案

相关问题

热门标签

最新问答