How can I load a custom PDF when user(s) trying to print my page out?
Question
Goal
The media="print" on my page is horrible and I want to improve it. Basically, I want to improve the look of my page when my users print it out.
I'm thinking . . .
Rather than, hiding and showing a lot of items on my page on media="print" . I decided to hide my page completely, and load a PDF instead. The PDF that I made. I'm not sure if this is the best approach for this, but I find that save a lot of time, and still have a full control in term of showing/hiding objects.
HTML
<body >
<span id="web">
<!-- My whole site structure -->
</span>
<span id="print"><iframe src="img/USER.pdf" width="100%" height="830" ></span>
</body>
Within my <body> , I have a PDF
<span id="print"><iframe src="img/name.pdf" width="100%" height="830" ></span>
I hide that PDF thoughout my whole page by doing :
#print{
display: none;
}
Then, when the user want to print my page out. I want to load this PDF back, and hide my whole site.
CSS
/*Hide the whole page*/
#web{
display: none;
}
/*Show PDF back*/
#print{
display:block!important;
}
Result
It works, but unfortunately, it's only work in Safari. Not Chrome, Not Firefox.
- What is the most efficient way to achieve something like this ?
- Can someone help me fix this to work with all browsers ?
- Is there any JS , or jQuery plug-in that will help me accomplish this ?
If there is anything else that I can provide, let me know.
2 answers
solution1
0 2015-04-28 19:37:53
The usual pattern for this would be to supply a link with text such as "Printable Version". You would then simply link to the PDF in a non-suprising way for the user.
If you want to persist with the CSS print layout, I have had some success with the CSS paged media specification .
Here is a sample CSS file - note that only a tiny amount is in a print style...
body {
font-family: Georgia, serif;
font-size: 12pt;
}
h2 {
string-set: title content();
}
img {
max-width: 100%;
}
.on-new-page {
display: block;
page-break-before: always;
}
.keep-together {
page-break-before: avoid;
}
.keep-intact {
page-break-inside: avoid;
}
.contents a::after {
content: leader('.') target-counter(attr(href), page);
}
@page {
margin: 2.54cm;
size: portrait;
}
@page :left {
margin-right: 3.18cm;
@bottom-left {
content: counter(page);
}
@top-left {
content: string(title);
}
}
@page :right {
margin-left: 3.18cm;
@bottom-right {
content: counter(page);
}
@top-right {
content: string(title);
}
}
@page :first {
margin-top: 10cm;
}
@media print {
.dont-print {
display: none;
}
}
You can check out my example page and do a print preview to see the effects this has. It varies by browser, but you can see there is much more control now than there used to be over print layouts.
solution2
0 ACCPTED 2015-04-29 13:49:40
For those of you that like my approach and looking for a solution for this, Here is how I come up with. I convert my PDF to an image (.PNG).
Adjust your HTML structure
Wrap them around a div or span .
<span id="web">
<!-- Whole HTML structure -->
</span>
<span id="print" style="display: none;" >
<img src="img/Image.png" width="90%">
</span>
Link to a print stylesheet.
Add this to the top of your page.
<link rel="stylesheet" media="print" href="css/print.css" />
Recap
I hide my image as a start.
`<span id="print" style="display: none;" ><img src="img/Image.png" width="90%"></span>`
Then, I show it back when the user is in the print mode, another word media =print , then my print.css will kick in.
print.css
/*Hide the whole page*/
#web{
display: none;
}
/*Show Image back*/
#print{
display:block!important;
background-color: white;
}
Result
When the user trying to print, now they should see something like this :
This should work on any browsers, since it just an image.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.