javascript - Print function not to print the whole page using jquery and css - Stack Overflow

admin管理员组

文章数量:1022874

Currently I have a web application that contains a lot of div , menu and many others layout staff. However, What I would like to have when the user click print is only two image or one image in some case. Assume I have already get the two image url, how to remove the css of entire page and perform the print as i expected ? Here is some code I tried , it seems it will change the whole page from the web app layout to only 2 image? Can I prevent that? thanks:

print.css

<style type="text/css" media="print">
    .img{
        padding:5%;
        height:100%;
        width:40%;
    }
    #img1{
        left:0px;
    }
</style>

js

$("#printBtn").click(function() {
    $("link[media='screen']").attr("href", "print.css");
    window.print();
});

Updated:

To be more precise, what i will do is to get the image number(s) of the current page , and only this two image will be printed. How to perform such function?

Assuming I get the id of the two img already. First of all, I need to add the class = 'img' dynamically in this two item ? What is the next step untill the print finish ? thanks

<img id="img_34" src="demo/medium/Web081112_P034_medium.jpg" alt="flip book">
<img id="img_35" src="demo/medium/Web081112_P034_medium.jpg" alt="flip book">

Currently I have a web application that contains a lot of div , menu and many others layout staff. However, What I would like to have when the user click print is only two image or one image in some case. Assume I have already get the two image url, how to remove the css of entire page and perform the print as i expected ? Here is some code I tried , it seems it will change the whole page from the web app layout to only 2 image? Can I prevent that? thanks:

print.css

<style type="text/css" media="print">
    .img{
        padding:5%;
        height:100%;
        width:40%;
    }
    #img1{
        left:0px;
    }
</style>

js

$("#printBtn").click(function() {
    $("link[media='screen']").attr("href", "print.css");
    window.print();
});

Updated:

To be more precise, what i will do is to get the image number(s) of the current page , and only this two image will be printed. How to perform such function?

Assuming I get the id of the two img already. First of all, I need to add the class = 'img' dynamically in this two item ? What is the next step untill the print finish ? thanks

<img id="img_34" src="demo/medium/Web081112_P034_medium.jpg" alt="flip book">
<img id="img_35" src="demo/medium/Web081112_P034_medium.jpg" alt="flip book">

• javascript
• jquery
• html
• css
• printing

Share Improve this question Follow edited Dec 28, 2012 at 9:02 user782104 asked Dec 28, 2012 at 8:34 user782104user782104 13.6k6060 gold badges178178 silver badges315315 bronze badges 5

• 1 I'm not sure I understand what you're asking, but you could simply use display:none for elements you do not want to show in the media="print" css – Pranav 웃 Commented Dec 28, 2012 at 8:38
• The problem is: when the css change from media to print, the screen will change as well? If the user click cancel print, can it return to the webapp layout ? thanks – user782104 Commented Dec 28, 2012 at 8:41
• It would be ideal if the screen won't change, is it possible? – user782104 Commented Dec 28, 2012 at 8:42
• The media="print" will not do anything on the normal screen, this css will be used only when you issue a print mand. Try using print preview in the browser, to see how it works. – Pranav 웃 Commented Dec 28, 2012 at 8:43
• @PranavKapoor user782104 is actually switching from screen CSS to print CSS. What he needs to do is use both at the same time: have a screen CSS file AND a print CSS file. – Robin van Baalen Commented Dec 28, 2012 at 8:51

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

Why do you change you <link media='screen' /> to a print.css stylesheet?

It's better practice if you would just use a screen and a print stylesheet side by side. No Javascript / jQuery needed for that:

<!-- Default styling -->
<link rel="stylesheet" type="text/css" href="/css/default.css" media="screen" />

<!-- This styling is only used for printing -->
<link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />

To answer your question, you can just add a div to the bottom of your page like <div id='print-wrap'></div> and put all your printy stuff in there.

Then, in your CSS you do something similar to this:

default.css

#print-wrap { display: none; }

print.css

img { display: none; }
#print-wrap { display: block; }
#img_34 { display: block !important; }
#img_35 { display: block !important; }

Update

Updated the answer corresponding to the updated question. If you want just two images visible on your printed page, just hide all other images with display: none; and show the images you want to print using display: block !important;

You could make the whole page (i.e) body hidden.

With CSS:

body {
visiblilty:hidden;
}

Then make your div visible (where your image is rendered)

#yourdiv{
visibility:visible;
}

Then use window.print(); which would print #yourdiv

Your print css and screen css will not be used together while you are on screen (webpage), the print css will be referred ONLY when your media is print (print).

Whenever a print mand is issued, the print css is referred along with the screen css, with print specific css properties having a higher priority.
Whenever, you are done and return to the same page, the page WILL return as is before the print mand was issued.

From W3,

print

Intended for paged material and for documents viewed on screen in print preview mode.

In your specific case, you want to print only 2 images, rather than all of them. So,

print.css :

img {
    display: none;
}
#img_34, #img_35 {      /*Image id's*/
    display: block;
}

To test pages using a print css, simply do a print preview in the browser to get an idea of how it looks, and press Esc to return to the page.

If you are interested in reading up more about print css, and guidelines, this is a good article by SmashingMagazine

Currently I have a web application that contains a lot of div , menu and many others layout staff. However, What I would like to have when the user click print is only two image or one image in some case. Assume I have already get the two image url, how to remove the css of entire page and perform the print as i expected ? Here is some code I tried , it seems it will change the whole page from the web app layout to only 2 image? Can I prevent that? thanks:

print.css

<style type="text/css" media="print">
    .img{
        padding:5%;
        height:100%;
        width:40%;
    }
    #img1{
        left:0px;
    }
</style>

js

$("#printBtn").click(function() {
    $("link[media='screen']").attr("href", "print.css");
    window.print();
});

Updated:

To be more precise, what i will do is to get the image number(s) of the current page , and only this two image will be printed. How to perform such function?

Assuming I get the id of the two img already. First of all, I need to add the class = 'img' dynamically in this two item ? What is the next step untill the print finish ? thanks

<img id="img_34" src="demo/medium/Web081112_P034_medium.jpg" alt="flip book">
<img id="img_35" src="demo/medium/Web081112_P034_medium.jpg" alt="flip book">

Currently I have a web application that contains a lot of div , menu and many others layout staff. However, What I would like to have when the user click print is only two image or one image in some case. Assume I have already get the two image url, how to remove the css of entire page and perform the print as i expected ? Here is some code I tried , it seems it will change the whole page from the web app layout to only 2 image? Can I prevent that? thanks:

print.css

<style type="text/css" media="print">
    .img{
        padding:5%;
        height:100%;
        width:40%;
    }
    #img1{
        left:0px;
    }
</style>

js

$("#printBtn").click(function() {
    $("link[media='screen']").attr("href", "print.css");
    window.print();
});

Updated:

To be more precise, what i will do is to get the image number(s) of the current page , and only this two image will be printed. How to perform such function?

Assuming I get the id of the two img already. First of all, I need to add the class = 'img' dynamically in this two item ? What is the next step untill the print finish ? thanks

<img id="img_34" src="demo/medium/Web081112_P034_medium.jpg" alt="flip book">
<img id="img_35" src="demo/medium/Web081112_P034_medium.jpg" alt="flip book">

• javascript
• jquery
• html
• css
• printing

Share Improve this question Follow edited Dec 28, 2012 at 9:02 user782104 asked Dec 28, 2012 at 8:34 user782104user782104 13.6k6060 gold badges178178 silver badges315315 bronze badges 5

• 1 I'm not sure I understand what you're asking, but you could simply use display:none for elements you do not want to show in the media="print" css – Pranav 웃 Commented Dec 28, 2012 at 8:38
• The problem is: when the css change from media to print, the screen will change as well? If the user click cancel print, can it return to the webapp layout ? thanks – user782104 Commented Dec 28, 2012 at 8:41
• It would be ideal if the screen won't change, is it possible? – user782104 Commented Dec 28, 2012 at 8:42
• The media="print" will not do anything on the normal screen, this css will be used only when you issue a print mand. Try using print preview in the browser, to see how it works. – Pranav 웃 Commented Dec 28, 2012 at 8:43
• @PranavKapoor user782104 is actually switching from screen CSS to print CSS. What he needs to do is use both at the same time: have a screen CSS file AND a print CSS file. – Robin van Baalen Commented Dec 28, 2012 at 8:51

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

Why do you change you <link media='screen' /> to a print.css stylesheet?

It's better practice if you would just use a screen and a print stylesheet side by side. No Javascript / jQuery needed for that:

<!-- Default styling -->
<link rel="stylesheet" type="text/css" href="/css/default.css" media="screen" />

<!-- This styling is only used for printing -->
<link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />

To answer your question, you can just add a div to the bottom of your page like <div id='print-wrap'></div> and put all your printy stuff in there.

Then, in your CSS you do something similar to this:

default.css

#print-wrap { display: none; }

print.css

img { display: none; }
#print-wrap { display: block; }
#img_34 { display: block !important; }
#img_35 { display: block !important; }

Update

Updated the answer corresponding to the updated question. If you want just two images visible on your printed page, just hide all other images with display: none; and show the images you want to print using display: block !important;

You could make the whole page (i.e) body hidden.

With CSS:

body {
visiblilty:hidden;
}

Then make your div visible (where your image is rendered)

#yourdiv{
visibility:visible;
}

Then use window.print(); which would print #yourdiv

Your print css and screen css will not be used together while you are on screen (webpage), the print css will be referred ONLY when your media is print (print).

Whenever a print mand is issued, the print css is referred along with the screen css, with print specific css properties having a higher priority.
Whenever, you are done and return to the same page, the page WILL return as is before the print mand was issued.

From W3,

print

Intended for paged material and for documents viewed on screen in print preview mode.

In your specific case, you want to print only 2 images, rather than all of them. So,

print.css :

img {
    display: none;
}
#img_34, #img_35 {      /*Image id's*/
    display: block;
}

To test pages using a print css, simply do a print preview in the browser to get an idea of how it looks, and press Esc to return to the page.

If you are interested in reading up more about print css, and guidelines, this is a good article by SmashingMagazine

本文标签： javascriptPrint function not to print the whole page using jquery and cssStack Overflow