Skip to content

Instantly share code, notes, and snippets.

@yurikoval

yurikoval/iframe_print.html

Created November 19, 2013 08:48
Show Gist options
  • Save yurikoval/7542278 to your computer and use it in GitHub Desktop.
Save yurikoval/7542278 to your computer and use it in GitHub Desktop.
Download ZIP
Printing from iframe when CSS is limiting
Raw
iframe_print.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="all.css" media="all" />
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
</head>
<body>
<p class="test_paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend congue vehicula. Nullam tempor volutpat nisi et dictum. Vestibulum dictum ipsum massa, eget dapibus est posuere vel. Donec a magna justo. Curabitur et erat non erat porta porttitor. Ut tristique eleifend diam cursus lacinia. Nam ultricies mi tincidunt lobortis tincidunt. Duis ac mi tempus, auctor augue sed, accumsan ante. Nunc dictum tempus ullamcorper. Nunc ullamcorper placerat gravida.</p>
<p class="test_paragraph">Maecenas convallis neque tortor, non sodales dui tristique eu. Integer condimentum enim ac mollis sagittis. Suspendisse elementum, tellus quis pretium rutrum, nunc urna eleifend neque, at feugiat ligula justo porta lectus. Praesent in consequat felis. Quisque suscipit auctor mattis. Proin eleifend arcu non lacus pulvinar aliquet. Curabitur sed fermentum turpis. Proin iaculis velit et arcu lobortis vehicula. Integer sollicitudin dictum dignissim. Aliquam ligula velit, egestas eget vulputate a, posuere at massa. Praesent eget velit id enim pharetra pretium. Nulla sit amet elit diam. Suspendisse potenti. Nullam ultricies leo vitae libero vestibulum lacinia.</p>
<button id="print_button" onclick="javascript:window.frames['print_me'].print();">Print Me</button>
<iframe id="print_me" src="iframe_print_source.html" style="display: none;"></iframe>
</body>
</html>
Raw
iframe_print_source.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="all.css" media="all" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
</head>
<body>
<p class="test_paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend congue vehicula. Nullam tempor volutpat nisi et dictum. Vestibulum dictum ipsum massa, eget dapibus est posuere vel. Donec a magna justo. Curabitur et erat non erat porta porttitor. Ut tristique eleifend diam cursus lacinia. Nam ultricies mi tincidunt lobortis tincidunt. Duis ac mi tempus, auctor augue sed, accumsan ante. Nunc dictum tempus ullamcorper. Nunc ullamcorper placerat gravida.</p>
<p class="test_paragraph">Maecenas convallis neque tortor, non sodales dui tristique eu. Integer condimentum enim ac mollis sagittis. Suspendisse elementum, tellus quis pretium rutrum, nunc urna eleifend neque, at feugiat ligula justo porta lectus. Praesent in consequat felis. Quisque suscipit auctor mattis. Proin eleifend arcu non lacus pulvinar aliquet. Curabitur sed fermentum turpis. Proin iaculis velit et arcu lobortis vehicula. Integer sollicitudin dictum dignissim. Aliquam ligula velit, egestas eget vulputate a, posuere at massa. Praesent eget velit id enim pharetra pretium. Nulla sit amet elit diam. Suspendisse potenti. Nullam ultricies leo vitae libero vestibulum lacinia.</p>
</body>
</html>
Raw
printing_one.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="all.css" media="all">
<link rel="stylesheet" type="text/css" href="screen.css" media="screen">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>
<body>
<p class="test_paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend congue vehicula. Nullam tempor volutpat nisi et dictum. Vestibulum dictum ipsum massa, eget dapibus est posuere vel. Donec a magna justo. Curabitur et erat non erat porta porttitor. Ut tristique eleifend diam cursus lacinia. Nam ultricies mi tincidunt lobortis tincidunt. Duis ac mi tempus, auctor augue sed, accumsan ante. Nunc dictum tempus ullamcorper. Nunc ullamcorper placerat gravida.</p>
<p class="test_paragraph">Maecenas convallis neque tortor, non sodales dui tristique eu. Integer condimentum enim ac mollis sagittis. Suspendisse elementum, tellus quis pretium rutrum, nunc urna eleifend neque, at feugiat ligula justo porta lectus. Praesent in consequat felis. Quisque suscipit auctor mattis. Proin eleifend arcu non lacus pulvinar aliquet. Curabitur sed fermentum turpis. Proin iaculis velit et arcu lobortis vehicula. Integer sollicitudin dictum dignissim. Aliquam ligula velit, egestas eget vulputate a, posuere at massa. Praesent eget velit id enim pharetra pretium. Nulla sit amet elit diam. Suspendisse potenti. Nullam ultricies leo vitae libero vestibulum lacinia.</p>
</body>
</html>
Raw
printing_two.html
<html>
<head>
<style>
@media screen {
p.test_paragraph {font-family:verdana,sans-serif;font-size:14px;}
}
@media print {
p.test_paragraph {font-family:times,serif;font-size:10px;}
}
@media screen, print {
p.test_paragraph {font-weight:bold;}
}
</style>
</head>
<body>
<p class="test_paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend congue vehicula. Nullam tempor volutpat nisi et dictum. Vestibulum dictum ipsum massa, eget dapibus est posuere vel. Donec a magna justo. Curabitur et erat non erat porta porttitor. Ut tristique eleifend diam cursus lacinia. Nam ultricies mi tincidunt lobortis tincidunt. Duis ac mi tempus, auctor augue sed, accumsan ante. Nunc dictum tempus ullamcorper. Nunc ullamcorper placerat gravida.</p>
<p class="test_paragraph">Maecenas convallis neque tortor, non sodales dui tristique eu. Integer condimentum enim ac mollis sagittis. Suspendisse elementum, tellus quis pretium rutrum, nunc urna eleifend neque, at feugiat ligula justo porta lectus. Praesent in consequat felis. Quisque suscipit auctor mattis. Proin eleifend arcu non lacus pulvinar aliquet. Curabitur sed fermentum turpis. Proin iaculis velit et arcu lobortis vehicula. Integer sollicitudin dictum dignissim. Aliquam ligula velit, egestas eget vulputate a, posuere at massa. Praesent eget velit id enim pharetra pretium. Nulla sit amet elit diam. Suspendisse potenti. Nullam ultricies leo vitae libero vestibulum lacinia.</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment