wkhtmltopdf

Question

只要任何文本在 class sidebar 范围内，我都会尝试在输出的 PDF 的左边缘添加侧边栏。我运行遇到的主要问题是，当文本跨越运行多行时，在 wkhtmltopdf returns 中计算 JS 中的跨度高度或坐标显示不正确的值，所以我不没有适当的值来调整或定位生成的侧边栏元素。我对任何可能使这项工作有效的想法持开放态度。

我尝试过的一些事情：

将侧边栏创建为跨度内的 :before 伪元素（示例如下）。如果我将跨度设置为 position: relative 并将 :before 设置为 position: absolute; height: 100%; left: 0，它会生成一个与跨度高度匹配的条，但它在跨度内呈现，我无法获得正确的偏移量值重新定位栏。在 wkhtmltopdf 中，getBoundingClientRect().left 和 offset().left 对于 :before 元素（由于页边距？）读取为 8，对于其父跨度为 0。
将边栏创建为 :before 伪元素，但未将其父元素设置为 position: relative。在这种情况下，该栏确实显示在 PDF 的左边缘，但我无法获得正确的跨度高度以应用于侧边栏。当我得到 offsetHeight 时，3 行以某种方式 returns 超过一千像素的高度。当我从 getBoundingClientRect().bottom 中减去 getBoundingClientRect().top 时，结果相同。块元素具有相同的行为。也许 wkhtmltopdf 框运行页面底部。
将侧边栏创建为 :before 伪元素，position: absolute 位于页面的左边缘，然后通过添加换行符（通过其 content 样式）调整其大小使用 getClientRects() 匹配跨度中的软中断计数。在 wkhtmltopdf 中，getClientRects().length 给了我 63 3 行跨度。
在检测到跨度时附加和前置两个 div，然后使用 canvas 在它们之间画一条线。对于这个想法，我需要两个 div 的坐标，当第二个 div 以某种方式返回 offset().top.
对于 JS，我确实尝试过将其嵌入，并从命令行运行使用 --run-script 将其连接。相同的结果。

<style>
  .sidebar { position: relative; background-color: yellow; }
  .sidebar::before { position: absolute; content: ''; border-left: 2px #000 solid; left: 0; height: 100%; }
</style>

<body>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. <span class="sidebar">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</span> Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</body>

Here's a mock-up of my target. The sidebar on the left here matches the height of the yellow selected text.

Answer 1

给你：

</<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            height: 842px;
            width: 595px;
        }

        .sidebar {
            background-color: yellow;
        }

        .sidebar::before {
            position: fixed;
            content: '';
            border-left: 2px #000 solid;
            left: 0;
        }
    </style>
</head>

<body>
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    <span class="sidebar">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
    </span> Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

    <script>
        document.addEventListener("DOMContentLoaded", function(event) {
            var span = document.getElementsByClassName('sidebar')[0];
            document.styleSheets[0].addRule('.sidebar::before', 'height: ' + span.offsetHeight + 'px;');
        });
    </script>
</body>


</html>

注意：我不得不为 wkhtmltopdf 添加高度和宽度的正文样式 javascript 以显示正确的 span.offsetHeight。没有那个，身高太大了。

在 Chrome 中进行测试，我不需要 body 样式，但是 wkhtmltopdf 需要。

我只是将其设置为一些 width/height 像素，但您可以将其设置为正确的像素，同时考虑到边距。

wkhtmltopdf - 添加一个侧边栏，跟随一段不同的文本

wkhtmltopdf - adding a sidebar that follows a span of varying text

html

javascript

css