Open print dialog window with different HTML content
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
In order to open a print dialog for the current page we do something like so:
<a href="javascript:window.print()">Print</a>
How to make a link in the current page that will open the print dialog with different context than the actual page?
Print dialog box in Chrome:
javascript html css printing
asked Nov 6 '14 at 18:10
Lior ElromLior Elrom
8,080115269
add a comment |
In order to open a print dialog for the current page we do something like so:
<a href="javascript:window.print()">Print</a>
How to make a link in the current page that will open the print dialog with different context than the actual page?
Print dialog box in Chrome:
javascript html css printing
asked Nov 6 '14 at 18:10
Lior ElromLior Elrom
8,080115269
add a comment |
In order to open a print dialog for the current page we do something like so:
<a href="javascript:window.print()">Print</a>
How to make a link in the current page that will open the print dialog with different context than the actual page?
Print dialog box in Chrome:
javascript html css printing
asked Nov 6 '14 at 18:10
Lior ElromLior Elrom
8,080115269
In order to open a print dialog for the current page we do something like so:
<a href="javascript:window.print()">Print</a>
How to make a link in the current page that will open the print dialog with different context than the actual page?
Print dialog box in Chrome:
javascript html css printing
javascript html css printing
asked Nov 6 '14 at 18:10
Lior ElromLior Elrom
8,080115269
asked Nov 6 '14 at 18:10
Lior ElromLior Elrom
8,080115269
edited Nov 17 '18 at 1:31
Lior Elrom
asked Nov 6 '14 at 18:10
Lior ElromLior Elrom
8,080115269
asked Nov 6 '14 at 18:10
Lior ElromLior Elrom
8,080115269
asked Nov 6 '14 at 18:10
Lior ElromLior Elrom
8,080115269
8,080115269
add a comment |
add a comment |
4 Answers
4
active
oldest
votes
I'm not sure if this is actually an answer to your question since your question has very little detail about what you mean by opening a new window.
If you are on /page/one and you want to have a link open /report/page and automatically bring up the print dialog...then that is as easy as triggering window.print on the load event, e.g.
<body onload='window.print()'>
If you don't want that page to always open the print dialog, then make the link to the new page /report/page?print=1 or something to that effect when you want to print, and when you find that in the URL trigger the onload event.
answered Nov 6 '14 at 18:20
Kevin NelsonKevin Nelson
6,33232236
add a comment |
Print Dialog
After playing around (and some googling), I came out with this solution:
I added a non-printable class to the current view and printable class to the printable container element. In my CSS, I used css media queries where @media screen and @media print states contains the corresponding display behavior:
@media screen {
.printable { display: none; }
.non-printable { display: block; }
}
@media print {
.printable { display: block; }
.non-printable { display: none; }
}
Now, I can print new content from my current view without opening a new tab or changing my current view.
Check out this jsFiddle and the supported browser's list.
answered Nov 6 '14 at 20:24
Lior ElromLior Elrom
8,080115269
add a comment |
There's a nice Javascript plugin called PrintThis that accomplishes this very easily.
You just need to use a jQuery selector and call the plugin, e.g.:
$('selector').printThis();
https://github.com/jasonday/printThis
answered Aug 7 '17 at 23:45
Alejandro Pablo TkachukAlejandro Pablo Tkachuk
1,4451314
add a comment |
Include printable content in a div. Like:
HTML:
<div id='printarea'>
<p>This is a sample text for printing purpose.</p>
<input type='button' id='btn' value='Print' onclick='printFunc();'>
</div>
<p>Do not print.</p>
JQuery:
function printFunc() {
var divToPrint = document.getElementById('printarea');
var htmlToPrint = '' +
'<style type="text/css">' +
'table th, table td {' +
'border:1px solid #000;' +
'padding;0.5em;' +
'}' +
'</style>';
htmlToPrint += divToPrint.outerHTML;
newWin = window.open("");
newWin.document.write("<h3 align='center'>Print Page</h3>");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
}
It will just print the printable div.Thanks
answered Nov 9 '17 at 15:42
BibanCSBibanCS
797
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f26786460%2fopen-print-dialog-window-with-different-html-content%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
I'm not sure if this is actually an answer to your question since your question has very little detail about what you mean by opening a new window.
If you are on /page/one and you want to have a link open /report/page and automatically bring up the print dialog...then that is as easy as triggering window.print on the load event, e.g.
<body onload='window.print()'>
If you don't want that page to always open the print dialog, then make the link to the new page /report/page?print=1 or something to that effect when you want to print, and when you find that in the URL trigger the onload event.
answered Nov 6 '14 at 18:20
Kevin NelsonKevin Nelson
6,33232236
add a comment |
I'm not sure if this is actually an answer to your question since your question has very little detail about what you mean by opening a new window.
If you are on /page/one and you want to have a link open /report/page and automatically bring up the print dialog...then that is as easy as triggering window.print on the load event, e.g.
<body onload='window.print()'>
If you don't want that page to always open the print dialog, then make the link to the new page /report/page?print=1 or something to that effect when you want to print, and when you find that in the URL trigger the onload event.
answered Nov 6 '14 at 18:20
Kevin NelsonKevin Nelson
6,33232236
add a comment |
I'm not sure if this is actually an answer to your question since your question has very little detail about what you mean by opening a new window.
If you are on /page/one and you want to have a link open /report/page and automatically bring up the print dialog...then that is as easy as triggering window.print on the load event, e.g.
<body onload='window.print()'>
If you don't want that page to always open the print dialog, then make the link to the new page /report/page?print=1 or something to that effect when you want to print, and when you find that in the URL trigger the onload event.
answered Nov 6 '14 at 18:20
Kevin NelsonKevin Nelson
6,33232236
I'm not sure if this is actually an answer to your question since your question has very little detail about what you mean by opening a new window.
If you are on /page/one and you want to have a link open /report/page and automatically bring up the print dialog...then that is as easy as triggering window.print on the load event, e.g.
<body onload='window.print()'>
If you don't want that page to always open the print dialog, then make the link to the new page /report/page?print=1 or something to that effect when you want to print, and when you find that in the URL trigger the onload event.
answered Nov 6 '14 at 18:20
Kevin NelsonKevin Nelson
6,33232236
answered Nov 6 '14 at 18:20
Kevin NelsonKevin Nelson
6,33232236
answered Nov 6 '14 at 18:20
Kevin NelsonKevin Nelson
6,33232236
answered Nov 6 '14 at 18:20
Kevin NelsonKevin Nelson
6,33232236
6,33232236
add a comment |
add a comment |
Print Dialog
After playing around (and some googling), I came out with this solution:
I added a non-printable class to the current view and printable class to the printable container element. In my CSS, I used css media queries where @media screen and @media print states contains the corresponding display behavior:
@media screen {
.printable { display: none; }
.non-printable { display: block; }
}
@media print {
.printable { display: block; }
.non-printable { display: none; }
}
Now, I can print new content from my current view without opening a new tab or changing my current view.
Check out this jsFiddle and the supported browser's list.
answered Nov 6 '14 at 20:24
Lior ElromLior Elrom
8,080115269
add a comment |
Print Dialog
After playing around (and some googling), I came out with this solution:
I added a non-printable class to the current view and printable class to the printable container element. In my CSS, I used css media queries where @media screen and @media print states contains the corresponding display behavior:
@media screen {
.printable { display: none; }
.non-printable { display: block; }
}
@media print {
.printable { display: block; }
.non-printable { display: none; }
}
Now, I can print new content from my current view without opening a new tab or changing my current view.
Check out this jsFiddle and the supported browser's list.
answered Nov 6 '14 at 20:24
Lior ElromLior Elrom
8,080115269
add a comment |
Print Dialog
After playing around (and some googling), I came out with this solution:
I added a non-printable class to the current view and printable class to the printable container element. In my CSS, I used css media queries where @media screen and @media print states contains the corresponding display behavior:
@media screen {
.printable { display: none; }
.non-printable { display: block; }
}
@media print {
.printable { display: block; }
.non-printable { display: none; }
}
Now, I can print new content from my current view without opening a new tab or changing my current view.
Check out this jsFiddle and the supported browser's list.
answered Nov 6 '14 at 20:24
Lior ElromLior Elrom
8,080115269
Print Dialog
After playing around (and some googling), I came out with this solution:
I added a non-printable class to the current view and printable class to the printable container element. In my CSS, I used css media queries where @media screen and @media print states contains the corresponding display behavior:
@media screen {
.printable { display: none; }
.non-printable { display: block; }
}
@media print {
.printable { display: block; }
.non-printable { display: none; }
}
Now, I can print new content from my current view without opening a new tab or changing my current view.
Check out this jsFiddle and the supported browser's list.
answered Nov 6 '14 at 20:24
Lior ElromLior Elrom
8,080115269
edited Feb 28 '16 at 6:05
answered Nov 6 '14 at 20:24
Lior ElromLior Elrom
8,080115269
answered Nov 6 '14 at 20:24
Lior ElromLior Elrom
8,080115269
answered Nov 6 '14 at 20:24
Lior ElromLior Elrom
8,080115269
8,080115269
add a comment |
add a comment |
There's a nice Javascript plugin called PrintThis that accomplishes this very easily.
You just need to use a jQuery selector and call the plugin, e.g.:
$('selector').printThis();
https://github.com/jasonday/printThis
answered Aug 7 '17 at 23:45
Alejandro Pablo TkachukAlejandro Pablo Tkachuk
1,4451314
add a comment |
There's a nice Javascript plugin called PrintThis that accomplishes this very easily.
You just need to use a jQuery selector and call the plugin, e.g.:
$('selector').printThis();
https://github.com/jasonday/printThis
answered Aug 7 '17 at 23:45
Alejandro Pablo TkachukAlejandro Pablo Tkachuk
1,4451314
add a comment |
There's a nice Javascript plugin called PrintThis that accomplishes this very easily.
You just need to use a jQuery selector and call the plugin, e.g.:
$('selector').printThis();
https://github.com/jasonday/printThis
answered Aug 7 '17 at 23:45
Alejandro Pablo TkachukAlejandro Pablo Tkachuk
1,4451314
There's a nice Javascript plugin called PrintThis that accomplishes this very easily.
You just need to use a jQuery selector and call the plugin, e.g.:
$('selector').printThis();
https://github.com/jasonday/printThis
answered Aug 7 '17 at 23:45
Alejandro Pablo TkachukAlejandro Pablo Tkachuk
1,4451314
answered Aug 7 '17 at 23:45
Alejandro Pablo TkachukAlejandro Pablo Tkachuk
1,4451314
answered Aug 7 '17 at 23:45
Alejandro Pablo TkachukAlejandro Pablo Tkachuk
1,4451314
answered Aug 7 '17 at 23:45
Alejandro Pablo TkachukAlejandro Pablo Tkachuk
1,4451314
1,4451314
add a comment |
add a comment |
Include printable content in a div. Like:
HTML:
<div id='printarea'>
<p>This is a sample text for printing purpose.</p>
<input type='button' id='btn' value='Print' onclick='printFunc();'>
</div>
<p>Do not print.</p>
JQuery:
function printFunc() {
var divToPrint = document.getElementById('printarea');
var htmlToPrint = '' +
'<style type="text/css">' +
'table th, table td {' +
'border:1px solid #000;' +
'padding;0.5em;' +
'}' +
'</style>';
htmlToPrint += divToPrint.outerHTML;
newWin = window.open("");
newWin.document.write("<h3 align='center'>Print Page</h3>");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
}
It will just print the printable div.Thanks
answered Nov 9 '17 at 15:42
BibanCSBibanCS
797
add a comment |
Include printable content in a div. Like:
HTML:
<div id='printarea'>
<p>This is a sample text for printing purpose.</p>
<input type='button' id='btn' value='Print' onclick='printFunc();'>
</div>
<p>Do not print.</p>
JQuery:
function printFunc() {
var divToPrint = document.getElementById('printarea');
var htmlToPrint = '' +
'<style type="text/css">' +
'table th, table td {' +
'border:1px solid #000;' +
'padding;0.5em;' +
'}' +
'</style>';
htmlToPrint += divToPrint.outerHTML;
newWin = window.open("");
newWin.document.write("<h3 align='center'>Print Page</h3>");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
}
It will just print the printable div.Thanks
answered Nov 9 '17 at 15:42
BibanCSBibanCS
797
add a comment |
Include printable content in a div. Like:
HTML:
<div id='printarea'>
<p>This is a sample text for printing purpose.</p>
<input type='button' id='btn' value='Print' onclick='printFunc();'>
</div>
<p>Do not print.</p>
JQuery:
function printFunc() {
var divToPrint = document.getElementById('printarea');
var htmlToPrint = '' +
'<style type="text/css">' +
'table th, table td {' +
'border:1px solid #000;' +
'padding;0.5em;' +
'}' +
'</style>';
htmlToPrint += divToPrint.outerHTML;
newWin = window.open("");
newWin.document.write("<h3 align='center'>Print Page</h3>");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
}
It will just print the printable div.Thanks
answered Nov 9 '17 at 15:42
BibanCSBibanCS
797
Include printable content in a div. Like:
HTML:
<div id='printarea'>
<p>This is a sample text for printing purpose.</p>
<input type='button' id='btn' value='Print' onclick='printFunc();'>
</div>
<p>Do not print.</p>
JQuery:
function printFunc() {
var divToPrint = document.getElementById('printarea');
var htmlToPrint = '' +
'<style type="text/css">' +
'table th, table td {' +
'border:1px solid #000;' +
'padding;0.5em;' +
'}' +
'</style>';
htmlToPrint += divToPrint.outerHTML;
newWin = window.open("");
newWin.document.write("<h3 align='center'>Print Page</h3>");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
}
It will just print the printable div.Thanks
answered Nov 9 '17 at 15:42
BibanCSBibanCS
797
answered Nov 9 '17 at 15:42
BibanCSBibanCS
797
answered Nov 9 '17 at 15:42
BibanCSBibanCS
797
answered Nov 9 '17 at 15:42
BibanCSBibanCS
797
797
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f26786460%2fopen-print-dialog-window-with-different-html-content%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
