个人中心
gpt4 book ai didi

javascript - wkhtmltopdf - 添加一个跟随不同文本范围的侧边栏

转载 作者：行者123 更新时间：2023-11-28 06:29:38 26 4
gpt4 key购买 nike

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

我尝试过的一些事情:

  • 将侧边栏创建为跨度内的 :before 伪元素(示例如下)。如果我将跨度设置为 position:relative 并将 :before 设置为 position:absolute;高度:100%； left: 0，它确实会生成一个与跨度高度匹配的条形，但它是在跨度内渲染的，并且我无法获得正确的左偏移值来重新定位该条形。在 wkhtmltopdf 中，getBoundingClientRect().left 和 offset().left 对于 :before 元素读取为 8(由于页边距？)和 0 为其父跨度。
  • 将侧边栏创建为 :before 伪元素，但不将其父元素设置为 position:relative。在这种情况下，该栏确实显示在 PDF 的左边缘，但我无法获得正确的跨度高度来应用于侧边栏。当我得到 offsetHeight 时，3 行跨度会以某种方式返回超过一千个像素的高度。当我从 getBoundingClientRect().bottom 中减去 getBoundingClientRect().top 时，结果相同。 block 元素具有相同的行为。也许 wkhtmltopdf 框会运行到页面底部。
  • 将侧边栏创建为 :before 伪元素，将 position:absolute 放置在页面的左边缘，然后通过添加换行符(通过其 content 样式)，以使用 getClientRects() 匹配跨度中的软中断计数。在 wkhtmltopdf 中， getClientRects().length 为我提供了 3 行跨度的 63 。
  • 检测到跨度时追加和添加两个 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.

最佳答案

给你:

</<!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 中测试，我不需要正文样式，但 wkhtmltopdf 需要。

我只是将其设置为一些宽度/高度像素，但您可以考虑边距将其设置为正确的像素。

关于javascript - wkhtmltopdf - 添加一个跟随不同文本范围的侧边栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34815840/

26 4 0
文章推荐： ios - swift:从 JSON 解析的 Alphabetiz 数据
文章推荐： css - Bootstrap CSS 文件无法在本地加载到 chrome
文章推荐： javascript - polymer iron-ajax调用以及如何在绑定(bind)发生之前修改/过滤响应？
文章推荐： javascript - 使用没有模型的环回中间件？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com