印刷される各ページにヘッダーとフッターを印刷しようとしています。ユーザーはレターまたはレポートを作成し、それを表示すると、ブラウザにレターが表示されます。そこから、ユーザーはそれを印刷できます。上部のオプション ボタンが消え、境界線が削除されます。ただし、コンテンツが十分に長い場合は、ヘッダーとフッターを各ページに印刷し、コンテンツを継続します。印刷を適切な寸法で正常に機能させることができます。
<div class="print_wrapper">
<div class="print_options">
<a href="#" onclick="self.close()"><i class="icon-remove"></i> Close</a>
|
<a href="{$base_url}residential-lettings/suppliers/generate-letter-pdf/supplier/{$supplier.id}/letter/{$letter.id}"><i class="icon-copy"></i> PDF</a>
|
<a href="#" onclick="window.print()"><i class="icon-print"></i> Print</a>
</div>
<div class="print_page">
<div class="print_header">
<div class="print_header_logo">
<h1 class="showhouse-text">Laagro</h1>
</div>
<div class="print_header_address">
<p>
New Somewhere House <br>
123 Somewhere Avenue <br>
Newry <br>
Down <br>
BT35 ABC <br>
UK
</p>
</div>
</div>
<div class="print_content">
<p>Dear Bob</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, repellat, magni, deleniti placeat obcaecati voluptatem alias voluptate laudantium necessitatibus voluptatum dolorem quod earum quo sapiente magnam atque non animi enim natus voluptatibus beatae debitis ipsa. Facilis atque aperiam id nobis perspiciatis debitis dolorum architecto reprehenderit. Cupiditate, illo asperiores animi enim ad velit culpa dolorem nesciunt similique tempora perspiciatis facilis doloremque saepe id consequatur!</p>
<p>Numquam, quam, aut beatae impedit id dolore doloribus sequi voluptatibus ad quae aspernatur similique vero vel qui ipsum fugit magnam non enim itaque hic. Reiciendis, possimus, magni, ex ea aliquid at optio molestias placeat ab blanditiis ipsum obcaecati cum excepturi quidem neque tempora eum odio voluptatem ipsam officiis quisquam harum quibusdam numquam pariatur sapiente et inventore sit in voluptatibus veritatis doloremque id aut aliquam. Incidunt, atque, minima labore iste cumque ad pariatur qui possimus ut libero inventore corporis perspiciatis nam voluptatem temporibus fugiat impedit culpa dolorem quo provident placeat amet delectus reiciendis rerum repudiandae quisquam similique quis aspernatur in voluptas optio at nulla aliquam numquam beatae dolores ab sint architecto molestiae sapiente commodi quam officiis quas veniam repellendus suscipit! Sequi, voluptate sapiente assumenda commodi. Maxime, nobis, corporis, doloremque, fugit modi sint iste aliquam maiores sequi voluptatum libero doloribus illum placeat nisi tempora natus aliquid. Harum, eius consequuntur asperiores.</p>
<p>Recusandae, error, aperiam totam laborum magnam distinctio architecto numquam quae nostrum fuga reprehenderit tenetur minima excepturi itaque vel pariatur rem suscipit ex. Repellendus ipsa placeat deleniti rerum praesentium voluptatibus sapiente nihil quidem magni. Quos, sapiente ea deserunt asperiores molestiae?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, repellat, magni, deleniti placeat obcaecati voluptatem alias voluptate laudantium necessitatibus voluptatum dolorem quod earum quo sapiente magnam atque non animi enim natus voluptatibus beatae debitis ipsa. Facilis atque aperiam id nobis perspiciatis debitis dolorum architecto reprehenderit. Cupiditate, illo asperiores animi enim ad velit culpa dolorem nesciunt similique tempora perspiciatis facilis doloremque saepe id consequatur!</p>
<p>Recusandae, error, aperiam totam laborum magnam distinctio architecto numquam quae nostrum fuga reprehenderit tenetur minima excepturi itaque vel pariatur rem suscipit ex. Repellendus ipsa placeat deleniti rerum praesentium voluptatibus sapiente nihil quidem magni. Quos, sapiente ea deserunt asperiores molestiae?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, repellat, magni, deleniti placeat obcaecati voluptatem alias voluptate laudantium necessitatibus voluptatum dolorem quod earum quo sapiente magnam atque non animi enim natus voluptatibus beatae debitis ipsa. Facilis atque aperiam id nobis perspiciatis debitis dolorum architecto reprehenderit. Cupiditate, illo asperiores animi enim ad velit culpa dolorem nesciunt similique tempora perspiciatis facilis doloremque saepe id consequatur!</p>
<p>Numquam, quam, aut beatae impedit id dolore doloribus sequi voluptatibus ad quae aspernatur similique vero vel qui ipsum fugit magnam non enim itaque hic. Reiciendis, possimus, magni, ex ea aliquid at optio molestias placeat ab blanditiis ipsum obcaecati cum excepturi quidem neque tempora eum odio voluptatem ipsam officiis quisquam harum quibusdam numquam pariatur sapiente et inventore sit in voluptatibus veritatis doloremque id aut aliquam. Incidunt, atque, minima labore iste cumque ad pariatur qui possimus ut libero inventore corporis perspiciatis nam voluptatem temporibus fugiat impedit culpa dolorem quo provident placeat amet delectus reiciendis rerum repudiandae quisquam similique quis aspernatur in voluptas optio at nulla aliquam numquam beatae dolores ab sint architecto molestiae sapiente commodi quam officiis quas veniam repellendus suscipit! Sequi, voluptate sapiente assumenda commodi. Maxime, nobis, corporis, doloremque, fugit modi sint iste aliquam maiores sequi voluptatum libero doloribus illum placeat nisi tempora natus aliquid. Harum, eius consequuntur asperiores.</p>
<p>Recusandae, error, aperiam totam laborum magnam distinctio architecto numquam quae nostrum fuga reprehenderit tenetur minima excepturi itaque vel pariatur rem suscipit ex. Repellendus ipsa placeat deleniti rerum praesentium voluptatibus sapiente nihil quidem magni. Quos, sapiente ea deserunt asperiores molestiae?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, repellat, magni, deleniti placeat obcaecati voluptatem alias voluptate laudantium necessitatibus voluptatum dolorem quod earum quo sapiente magnam atque non animi enim natus voluptatibus beatae debitis ipsa. Facilis atque aperiam id nobis perspiciatis debitis dolorum architecto reprehenderit. Cupiditate, illo asperiores animi enim ad velit culpa dolorem nesciunt similique tempora perspiciatis facilis doloremque saepe id consequatur!</p>
<p>Recusandae, error, aperiam totam laborum magnam distinctio architecto numquam quae nostrum fuga reprehenderit tenetur minima excepturi itaque vel pariatur rem suscipit ex. Repellendus ipsa placeat deleniti rerum praesentium voluptatibus sapiente nihil quidem magni. Quos, sapiente ea deserunt asperiores molestiae?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, repellat, magni, deleniti placeat obcaecati voluptatem alias voluptate laudantium necessitatibus voluptatum dolorem quod earum quo sapiente magnam atque non animi enim natus voluptatibus beatae debitis ipsa. Facilis atque aperiam id nobis perspiciatis debitis dolorum architecto reprehenderit. Cupiditate, illo asperiores animi enim ad velit culpa dolorem nesciunt similique tempora perspiciatis facilis doloremque saepe id consequatur!</p>
<p>Recusandae, error, aperiam totam laborum magnam distinctio architecto numquam quae nostrum fuga reprehenderit tenetur minima excepturi itaque vel pariatur rem suscipit ex. Repellendus ipsa placeat deleniti rerum praesentium voluptatibus sapiente nihil quidem magni. Quos, sapiente ea deserunt asperiores molestiae?</p>
<p>Regards,<br>
Pierce</p>
</div>
<div class="print_footer">
<div class="print_footer_left">
<p>Company Reg No. 045 AB6</p>
</div>
<div class="print_footer_right">
<p>Registered Office Address: 123 Somewhere Avenue, </p>
</div>
</div>
</div>
</div>
.print_wrapper{
width: 21cm;
margin: auto;
}
.print_options{
float: right;
}
.print_page{
background: white;
font-size: 12pt;
float: left;
padding: 10px;
border: 1px #D3D3D3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.print_header{
float: left;
clear: both;
width: 100%;
}
.print_header_logo{
float: left;
}
.print_header_address{
float: right;
text-align: right;
font-size: 0.7em;
margin: 1.5em 0 0 0;
}
.print_content{
float: left;
font-size: 0.9em;
margin: 1em 0 0 0;
}
.print_footer{
float: left;
width: 100%;
margin: 1em 0 0 0;
font-size: 0.9em;
border-top: 1px solid #000;
}
.print_footer_left{
float: left;
}
.print_footer_right{
float: right;
text-align: right;
}
@page {
size: A4;
margin: 0;
}
@media print{
.print_options{display: none;}
.print_wrapper{width: 90%;}
.print_page{border: none; box-shadow: none;}
}