<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>HTML to PDF (Print manipulation)</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<div class="header">
<img src="http://via.placeholder.com/100x100" />
<h1>Header</h1>
</div>
<div class="content">
<a class="save" href="">Click here to save as PDF</a>
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec ultrices tortor.</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec ultrices tortor.</h2>
<p>Lorem ipsum dolor sit amet, <a href="https://www.google.co.uk/">consectetur adipiscing</a> elit. Phasellus nec ultrices tortor. Nulla in mauris quis nunc pellentesque ultricies id in ex. Aliquam a commodo leo. Suspendisse tempus lectus sit amet dictum pulvinar. Vestibulum at sagittis urna. Aenean vulputate facilisis cursus. Aliquam pretium neque eget sollicitudin facilisis. Etiam fermentum egestas sapien. Sed bibendum dapibus tincidunt. In non efficitur felis. Morbi lacinia lacus ipsum, eu auctor erat facilisis et. Vivamus rhoncus, dolor ut posuere pellentesque, nunc arcu varius quam, in scelerisque sapien urna ac dui. Etiam a tortor congue, lobortis felis et, mattis magna.</p>
<img src="https://images.unsplash.com/photo-1495277493816-4c359911b7f1?auto=format&fit=crop&w=1946&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" />
<p><strong>Suspendisse magna elit</strong>, lobortis pulvinar mattis a, molestie vel sapien. Nulla auctor viverra tristique. Aenean luctus elementum dignissim. Praesent sodales diam a ipsum condimentum ornare. Mauris id sodales lacus. Praesent et cursus sem. Sed blandit quam lacus.</p>
<p style="color: red">Fusce consectetur dignissim enim ut ornare. Morbi ut ultricies est, id finibus elit. Curabitur consequat, ante et hendrerit dapibus, lectus magna vestibulum eros, et mattis enim ligula quis lectus. Vestibulum leo erat, dapibus cursus pellentesque in, posuere ac odio. Maecenas vestibulum et metus ac consectetur. Proin dignissim mauris ut magna mattis posuere. Sed neque ipsum, pellentesque sit amet augue a, tincidunt tempor turpis. Sed tempus lobortis nunc, interdum sagittis lorem iaculis non. In at lectus ut turpis dictum ornare.</p>
<p style="font-family: times">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec quis lorem aliquet, ultricies risus eu, mollis tellus. Etiam vel orci at nisl porttitor maximus. Mauris vitae interdum justo. Maecenas ac massa et turpis dignissim ornare ut eget justo. Fusce bibendum nibh orci, eget mattis ante tincidunt eu. Nulla tristique dui ac ante mattis volutpat. Donec eget ex quis urna interdum placerat eu in ante. Donec varius magna et libero hendrerit convallis. Phasellus fringilla nibh ut convallis mollis. Phasellus at dolor id orci dictum venenatis.</p>
<p>Maecenas lacus lorem, facilisis sit amet libero dapibus, eleifend mattis mi. Donec imperdiet pretium volutpat. Aenean et felis commodo, ullamcorper mi at, porta velit. Duis ornare egestas luctus. In non semper nibh. Cras gravida ipsum at placerat placerat. Mauris vulputate tortor sit amet placerat imperdiet. Donec vel malesuada dolor.</p>
</div>
<aside>
<h1>Ignore the aside when saving as PDF</h1>
<img src="https://images.unsplash.com/photo-1435783099294-283725c37230?auto=format&fit=crop&w=2000&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec ultrices tortor. Nulla in mauris quis nunc pellentesque ultricies id in ex. Aliquam a commodo leo. Suspendisse tempus lectus sit amet dictum pulvinar. Vestibulum at sagittis urna. Aenean vulputate facilisis cursus. Aliquam pretium neque eget sollicitudin facilisis. Etiam fermentum egestas sapien. Sed bibendum dapibus tincidunt. In non efficitur felis. Morbi lacinia lacus ipsum, eu auctor erat facilisis et. Vivamus rhoncus, dolor ut posuere pellentesque, nunc arcu varius quam, in scelerisque sapien urna ac dui. Etiam a tortor congue, lobortis felis et, mattis magna.</p>
</aside>
<div class="footer">
<img src="http://via.placeholder.com/100x100" />
<h1>Footer</h1>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script>
$('.save').click(function(){
window.print();
});
</script>
</body>
</html>
Скачать пример
Справочники, инструменты, документация