规则图像处的 CSS 页边距

Question

是否可以按规则将图像添加到页边距？我遇到过这样的情况：我们利用 PagedJS polyfill 将 html 从文本编辑器元素转换为可打印页面。这样做是为了方便打印页眉/页脚中的页数和特殊文本。这是通过规则中的 @page 和 @top-left/@bottom-left/@bottom-right css 控制的。

最近有人要求在标题中添加图片。我似乎无法做到这一点，而且我不确定我的问题可能出在哪里。

目前使用的CSS如下：

<style>
    @page{
        @top-left {
            content: headerData
        }
        @bottom-right {
            content: "Page: " counter(page) " of " counter(pages)
        }
        @bottom-left {
            content: footerData
        }
    }
</style>

'headerData'和'footerData'是用户提供的动态值，在页面加载期间由服务器添加。然后 PagedJS 利用它来创建可打印页面。这是当前输出的示例。

使用的JS没什么特别的。完整内容如下：

window.PagedConfig = {
    auto: false,
};

window.onload = function() {
    window.PagedPolyfill
        .preview(document.getElementById("editorContent").innerHTML, undefined, document.getElementById("renderContent"))
        .then(() => {
            document.getElementById("editorContent").remove();
            window.print();
        });
}

它试图将图像添加到不起作用的标题中。我尝试使用指定图像的 Base64，但这只是显示实际文本，即使我手动输入它也是如此。

<style>
    @page{
        @top-left {
            content: "data:image/png;base64, iVBORw0KGgo...."
        }
        @bottom-right {
            content: "Page: " counter(page) " of " counter(pages)
        }
        @bottom-left {
            content: footerData
        }
    }
</style>

我还尝试使用 URL 函数来提供图像，我在许多其他位置都这样做过（尽管以前从未使用 at 规则）。边距位置不显示任何内容。

<style>
    @page{
        @top-left {
            content: url('../images/pic10.png');
        }
        @bottom-right {
            content: "Page: " counter(page) " of " counter(pages)
        }
        @bottom-left {
            content: footerData
        }
    }
</style>

我还尝试利用背景图像属性，但这也不起作用。

<style>
    @page{
        @top-left {
            background-image: url('../images/pic10.png');
        }
        @bottom-right {
            content: "Page: " counter(page) " of " counter(pages)
        }
        @bottom-left {
            content: footerData
        }
    }
</style>

页边距中可以有图像吗？我不想用纯粹的 CSS 来完成这个任务，但考虑到使用 PagedJS，我不确定我还能如何实现它。

---

编辑

我已经实现了一个可以完成这项工作的黑客解决方案。

window.onload = function() {
    window.PagedPolyfill
        .preview(document.getElementById("editorContent").innerHTML, undefined, document.getElementById("renderContent"))
        .then(() => {
            document.getElementById("editorContent").remove();
            let printLogoElement = document.createElement("img");
            printLogoElement.setAttribute("src", headerLogo);
            printLogoElement.setAttribute("class", "printLogo");
            document.getElementsByClassName("pagedjs_margin-top-left-corner-holder")[0]
                .appendChild(printLogoElement);
            setTimeout(function(){
                window.print();
            }, 100);
        });
}

再次强调，“headerLogo”是在页面加载期间由服务器提供的，并且是我之前尝试过的 base64。 printLogo 是用于居中的简单自动边距 CSS。超时是由于在实际附加图像元素之前调用了 window.print 。需要稍微延迟，以便元素实际出现在打印预览中。

但我认为这是一个不太理想的实现。当然有更好的方法可以完成这个任务吗？

Answer 1

原则上这是可能的。我已经在 CSS 分页媒体模板中完成了此操作，并通过 Antennahouse Formatter 进行处理。

实际例子：

@top-right {
        content: url("logo 30 mm.pdf");
        transform:translate(42mm,13mm) scale(2.2);
        width: 68mm;
        margin-top: 12mm;
        vertical-align: top;
        margin-bottom: 0mm;
    }   

所以这可能特定于您使用的格式化程序。如果将图像与 HTML 放在同一文件夹中是否有效？