Javascript wkhtmltopdf-添加一个边栏，该边栏跟随一系列不同的文本_Javascript_Html_Css_Wkhtmltopdf

Javascript wkhtmltopdf-添加一个边栏，该边栏跟随一系列不同的文本

javascript html css

Javascript wkhtmltopdf-添加一个边栏，该边栏跟随一系列不同的文本,javascript,html,css,wkhtmltopdf,Javascript,Html,Css,Wkhtmltopdf,每当任何文本位于带有classsidebar的范围内时，我都试图在输出的PDF的左边缘添加一个侧边栏。我遇到的主要问题是，当文本跨距运行多行时，在wkhtmltopdf中计算跨距的高度或JS中的坐标会返回不正确的值，因此我没有适当的值来调整或定位生成的边栏元素。我愿意接受任何可能使这项工作成功的想法我尝试过的一些事情：将边栏创建为span内的：before伪元素（下面的示例）。如果我将跨度设置为位置：相对和：之前设置为位置：绝对；身高：100%；左：0，它确实会生成一个与跨度高度匹配的条形

每当任何文本位于带有class

sidebar

的范围内时，我都试图在输出的PDF的左边缘添加一个侧边栏。我遇到的主要问题是，当文本跨距运行多行时，在wkhtmltopdf中计算跨距的高度或JS中的坐标会返回不正确的值，因此我没有适当的值来调整或定位生成的边栏元素。我愿意接受任何可能使这项工作成功的想法

我尝试过的一些事情：

将边栏创建为span内的
```
：before
```
伪元素（下面的示例）。如果我将跨度设置为
```
位置：相对
```
和
```
：之前
```
设置为
```
位置：绝对；身高：100%；左：0
```
，它确实会生成一个与跨度高度匹配的条形图，但它是在跨度内渲染的，我无法获得正确的“左偏移”值来重新定位条形图。在wkhtmltopdf中，
```
getBoundingClientRect（）.左
```
和
```
offset（）.左
```
对于：before元素（由于页边距？）读取为
```
8
```
，对于其父跨度读取为
```
0
```

将边栏创建为

：在

伪元素之前，但不将其父元素设置为

位置：相对

。在本例中，该栏确实显示在PDF的左边缘，但我无法获得适用于侧栏的正确跨距高度。当我看不清

时，3行跨距不知何故返回了超过1000像素的高度。当我从getBoundingClientRect（）.bottom
中减去getBoundingClientRect（）.top
时，结果相同。块元素具有相同的行为。也许wkhtmltopdf框会运行到页面底部


将边栏创建为：在伪元素之前，将位置：绝对
放置在页面的左边缘，然后通过添加换行符（通过其内容
样式）来调整边栏大小，以使用getClientRects（）
匹配跨距中的软换行计数。在wkhtmltopdf中，getClientRects（）.length为我提供了3行跨度的63

当检测到跨度时，在两个div后面加上并加上前缀，然后使用canvas在它们之间画一条线。对于这个想法，我需要两个div的坐标，当第二个div返回一个负数表示offset（）

对于JS，我尝试过嵌入它，并使用--runscript
从命令行运行它。同样的结果




.sidebar{位置：相对；背景颜色：黄色；}
.sidebar:：在{位置：绝对；内容：''；左边框：2px#000实体；左：0；高度：100%；}之前
对于所有的错误，我们都要清楚地认识到这一点，因为我们必须清楚地认识到，所有人都应该受到赞扬、尊重和尊重，因为他们都是发明家和准建筑师。最重要的一点是，在劳动和就业领域，所有人都有自己的权利、义务和义务。你是否应该在一个自由的世界里为自己的利益辩护？你是否应该在一个自由的世界里为自己的利益辩护？


给你：
</<!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>

给你：
</<!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>

假设测试html文件只包含提供的代码是否安全？另外，您能否提供运行的wkthltopdf命令，以便我们处于同一页面上。另外，如果你能对预期的最终结果做一个粗略的图像模型，那就太好了。是的，提供的代码来自我的测试文件，减去我各种失败尝试中注释掉的所有JS。我使用的命令是：wkhtmltopdf--debug javascript test.html test.pdf。我已添加了目标的粗略比较。谢谢我假设您希望坚持使用css而不是javascript，对吗？最好是这样，但对于初学者，我正在寻找任何可行的解决方案。假设测试html文件只包含提供的代码安全吗？另外，您能否提供运行的wkthltopdf命令，以便我们处于同一页面上。另外，如果你能对预期的最终结果做一个粗略的图像模型，那就太好了。是的，提供的代码来自我的测试文件，减去我各种失败尝试中注释掉的所有JS。我使用的命令是：wkhtmltopdf--debug javascript test.html test.pdf。我已添加了目标的粗略比较。谢谢我想你想坚持使用css而不是javascript，对吗？最好是这样，但对于初学者来说，我正在寻找任何可行的解决方案。我已经尝试过一些，到目前为止，这里有一些发现：1）当页面滚动时，固定的
侧边栏在Chrome中不起作用，但是（幸运/不幸的是）不会在PDF中固定其文本。2） 这不适用于多个侧栏（我没有在前面的要求中说明），但可以根据您提供的内容来解决。3） 事实证明，获得准确的越位的关键是在身体上声明宽度。这才是我真正需要的。谢谢，你是个救生员！是啊，那也难倒我了。花了一段时间在wkhtmltopdf中获得正确的高度。我已经玩了一点，到目前为止，这里有一些发现：1）当页面滚动时，fixed
侧边栏在Chrome中不起作用，但是（幸运/不幸的是）它的文本在PDF中保持不变。2） 这不适用于多个侧栏（我没有在前面的要求中说明），但可以根据您提供的内容来解决。3） 事实证明，获得准确的越位的关键是在身体上声明宽度。这才是我真正需要的。谢谢，你是个救生员！是啊，那也难倒我了。花了一些时间在wkhtmltopdf中获得正确的高度。