文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在从html转换pdf页面周围添加边框

问如何在从html转换pdf页面周围添加边框
EN

Stack Overflow用户

提问于 2021-04-17 04:39:24

回答 1查看 52关注 0票数 1

当从html转换它时，我想在pdf周围添加一个边框。我试过使用@page css，但它似乎确实有效。实现这一目标的最佳方法是什么？我不想使用位置固定在身体或任何其他div，因为如果它超出了页面，它将是一个问题。

注意:运行代码片段将打开打印窗口.

window.print();

 *,
        ::after,
        ::before {
            box-sizing: border-box;
        }

        html {
            font-family:'sans-serif';
            line-height: 1.15;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            -ms-overflow-style: scrollbar;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            margin: 0;
            font-size: 14px;
            font-weight: 400;
            line-height: 1.5;
            color: #000000;
            text-align: left;
            background-color: #fff;
        }

        .wrapper {
            margin: 0 auto;
            padding: 20px;
        }

        @page {
            size: A4;
            margin-top: 0.25in;
            margin-bottom: 0.25in;
            border: 1px solid black;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html</title>
</head>

<body>
    <div class="wrapper">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lobortis scelerisque fermentum dui faucibus in ornare quam viverra. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque. Purus sit amet luctus venenatis lectus magna fringilla urna porttitor. Massa tincidunt dui ut ornare lectus sit. At auctor urna nunc id cursus metus aliquam. Diam quam nulla porttitor massa id neque aliquam vestibulum morbi. Quam elementum pulvinar etiam non quam lacus suspendisse. Nam at lectus urna duis convallis convallis tellus. Sem nulla pharetra diam sit. Viverra maecenas accumsan lacus vel facilisis volutpat. Ut enim blandit volutpat maecenas. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Pharetra massa massa ultricies mi quis hendrerit dolor. Tincidunt augue interdum velit euismod in pellentesque massa placerat duis.

</p>
      <p>Molestie ac feugiat sed lectus vestibulum mattis. Et netus et malesuada fames ac turpis egestas sed tempus. Ipsum dolor sit amet consectetur adipiscing elit pellentesque. Varius vel pharetra vel turpis. Velit sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Aliquam sem et tortor consequat id porta. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Elit duis tristique sollicitudin nibh sit amet commodo. Vel turpis nunc eget lorem dolor sed viverra. Aliquam sem fringilla ut morbi tincidunt. Viverra nam libero justo laoreet sit amet. Phasellus vestibulum lorem sed risus ultricies tristique nulla aliquet enim. Accumsan tortor posuere ac ut consequat semper. Vulputate enim nulla aliquet porttitor lacus luctus. Eget duis at tellus at urna condimentum mattis pellentesque. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

</p>
      <p>Tincidunt praesent semper feugiat nibh. Cras pulvinar mattis nunc sed blandit libero. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Consectetur adipiscing elit duis tristique sollicitudin. Amet dictum sit amet justo donec. Convallis posuere morbi leo urna molestie. Eu facilisis sed odio morbi. Mi eget mauris pharetra et ultrices neque ornare aenean euismod. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit. Semper quis lectus nulla at volutpat diam. Sit amet nisl suscipit adipiscing bibendum est ultricies integer quis. Iaculis at erat pellentesque adipiscing commodo elit. In iaculis nunc sed augue lacus. Sed felis eget velit aliquet sagittis id. Morbi tristique senectus et netus et. Fames ac turpis egestas sed tempus urna et pharetra pharetra. In ornare quam viverra orci sagittis eu volutpat odio facilisis. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae. Nunc eget lorem dolor sed viverra. Sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula.

</p>
  </div>
</body>

</html>

html

css

pdf-generation

puppeteer

html-to-pdf

回答 1

Stack Overflow用户

发布于 2021-04-17 06:09:06

您可以使用@media print

window.print();

@media print {
    body{
        border:12px solid red;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html</title>
</head>

<body>
    <div class="wrapper">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lobortis scelerisque fermentum dui faucibus in ornare quam viverra. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque. Purus sit amet luctus venenatis lectus magna fringilla urna porttitor. Massa tincidunt dui ut ornare lectus sit. At auctor urna nunc id cursus metus aliquam. Diam quam nulla porttitor massa id neque aliquam vestibulum morbi. Quam elementum pulvinar etiam non quam lacus suspendisse. Nam at lectus urna duis convallis convallis tellus. Sem nulla pharetra diam sit. Viverra maecenas accumsan lacus vel facilisis volutpat. Ut enim blandit volutpat maecenas. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Pharetra massa massa ultricies mi quis hendrerit dolor. Tincidunt augue interdum velit euismod in pellentesque massa placerat duis.

</p>
      <p>Molestie ac feugiat sed lectus vestibulum mattis. Et netus et malesuada fames ac turpis egestas sed tempus. Ipsum dolor sit amet consectetur adipiscing elit pellentesque. Varius vel pharetra vel turpis. Velit sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Aliquam sem et tortor consequat id porta. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Elit duis tristique sollicitudin nibh sit amet commodo. Vel turpis nunc eget lorem dolor sed viverra. Aliquam sem fringilla ut morbi tincidunt. Viverra nam libero justo laoreet sit amet. Phasellus vestibulum lorem sed risus ultricies tristique nulla aliquet enim. Accumsan tortor posuere ac ut consequat semper. Vulputate enim nulla aliquet porttitor lacus luctus. Eget duis at tellus at urna condimentum mattis pellentesque. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

</p>
      <p>Tincidunt praesent semper feugiat nibh. Cras pulvinar mattis nunc sed blandit libero. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Consectetur adipiscing elit duis tristique sollicitudin. Amet dictum sit amet justo donec. Convallis posuere morbi leo urna molestie. Eu facilisis sed odio morbi. Mi eget mauris pharetra et ultrices neque ornare aenean euismod. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit. Semper quis lectus nulla at volutpat diam. Sit amet nisl suscipit adipiscing bibendum est ultricies integer quis. Iaculis at erat pellentesque adipiscing commodo elit. In iaculis nunc sed augue lacus. Sed felis eget velit aliquet sagittis id. Morbi tristique senectus et netus et. Fames ac turpis egestas sed tempus urna et pharetra pharetra. In ornare quam viverra orci sagittis eu volutpat odio facilisis. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae. Nunc eget lorem dolor sed viverra. Sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula.

</p>
  </div>
</body>

</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67134708

复制

相似问题

问如何在从html转换pdf页面周围添加边框
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在从html转换pdf页面周围添加边框EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在从html转换pdf页面周围添加边框
EN