Распечатайте страницу с цветом фона, начиная с края PDF-документа
Я хотел бы, чтобы серо-синее поле было выровнено по краю PDF-файла, созданного Google Chrome через диалоговое окно печати.
@page— этоsize: letter portraitили 8,5 дюймов (ширина) x 11 дюймов (высота)left-sidebar— этоheight: 11inс синим фономintro— этоheight: 2inна сером фоне
Почему это не работает? Можно ли предотвратить появление белого фона вверху/слева/низу left-sidebar div?
Код
<html>
<head>
<meta charset = "UTF-8">
<style>
/* Printing */
* {
/* Force background graphic printing */
-webkit-print-color-adjust: exact !important; /* Chrome, Safari 6 – 15.3, Edge */
color-adjust: exact !important; /* Firefox 48 – 96 */
print-color-adjust: exact !important; /* Firefox 97+, Safari 15.4+ */
}
@page {
size: letter portrait;
margin: 0;
}
@media print {
body {
visibility: hidden;
}
.page {
visibility: visible;
padding: 0;
margin: 0;
}
}
/* Browser */
@media screen {
body {
background: #e0e0e0;
}
.page {
background: white;
box-shadow: 0 .5mm 2mm rgba(0,0,0,.3);
margin: 2rem auto;
}
}
/* Paging */
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.page {
width: 8.5in;
height: 11in;
}
.page-content {
position: absolute;
display: flex;
}
/* Page Layout */
.left-sidebar {
flex-grow: 0;
flex-shrink: 0;
width: 3in;
height: 11in !important;
margin: 0;
padding: 0;
background-color: #284877;
color: white;
}
.right-sidebar {
margin: 0;
padding: 0;
background-color: white;
color: black;
}
.intro {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 2in;
background-color: #d2d2d2;
}
/* Text */
.title {
font-weight: 800;
color: #284877;
font-size: 24pt;
}
.section {
padding: 0.5rem 0.75rem 0;
}
</style>
</head>
<body>
<div class = "page">
<div class = "page-content">
<div class = "left-sidebar">
<div class = "intro">
<div class = "title">
Document Name
</div>
</div>
<div class = "section">
<p>Lorem ipsum 1...</p>
</div>
</div>
<div class = "right-sidebar">
<p>Lorem ipsum 2...</p>
</div>
</div>
</div>
</body>
Живая демонстрация: https://ajility.dev/stack-overflow/print-with-bleed/
Ответы 1
У вас есть большая часть правильного HTML-кода для нужной страницы, но немного неправильный порядок команд. Страницы PDF не имеют полей, поэтому тело страницы /MediaBox и /BleedBox должно быть одинакового размера, без границ, полей, отступов или теневого поля.
Вот временная ссылка на результат изменения одной-двух строк. https://filetransfer.io/data-package/L6EUUb1S#link
Вот вид.
Вот начало медиа-страницы <style> для этого результата.
<style>
/* Printing */
* {
/* Force background graphic printing */
-webkit-print-color-adjust: exact !important; /* Chrome, Safari 6 – 15.3, Edge */
color-adjust: exact !important; /* Firefox 48 – 96 */
print-color-adjust: exact !important; /* Firefox 97+, Safari 15.4+ */
}
@media print { @ page {size: letter; margin: 0;}
body {
visibility: hidden; margin: 0;
}
.page {
visibility: visible;
padding: 0;
margin: 0;
}
}
Это гарантирует наличие только одной границы (/MediaBox [ 0 0 612 792 ]) для страницы PDF.
<<
/Type /Page
/Resources <</ExtGState <</G3 3 0 R/G4 4 0 R>>/Font <</F5 5 0 R>> >>
/MediaBox [ 0 0 612 792 ]
/Contents 6 0 R
/StructParents 0
/Parent 7 0 R
>>
@Ajility, это PDF-файл при запуске в программе просмотра, он похож, но не идентичен тому, как работает PostScripting. Итак, это описание типа PDF/страницы для того, как эта одна страница должна быть структурирована с содержимым в этом случае, будет определено в объект 6, но эта страница является дочерним объектом /Parent 7. Мы говорим, что PDF-файл создается случайным образом, поскольку объекты не хранятся в обычном человеческом порядке, поэтому страница 2 может быть до страницы 20 или до 1 и т. д. PDF-файл не является страницами текста. а абзацы — это просто двоичные числа, которые можно читать, как обычный текст.
Вы потрясающие - спасибо! Могу ли я узнать, как называется второй блок кода в вашем ответе (
/MediaBox...)? Я никогда не видел этого раньше.