如何解决从 html 转换时如何在 pdf 页面周围添加边框
我想在从 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>解决方法
您可以使用@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>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
