Set PDF to be printed instead of webpage?
Currently I am a junior developer who is trying to create github.io resume that is friendly for employers. I worked in chrome and managed to set up correct print settings that work correctly in chrome and firefox but not safari or edge.
In chrome and firefox my print formats to 2 pages, where as in safari and edge it formats to 4 pages.
One of the first things I set up was a "download pdf" button that downloads a nicely formatted pdf which is the exact same format as my working print settings. I also want the general print button to work and send out the same format so if my download pdf button isn't used the employer can still have a friendly print format.
If there anyway I can set it up so when print is selected from the menu it uses my pdf instead printing out the webpage? This would save me a lot of time setting up print settings for each browser and the print can be reliable across browsers.
I am open to using scripts to make this work.
javascript jquery html css printing
add a comment |
Currently I am a junior developer who is trying to create github.io resume that is friendly for employers. I worked in chrome and managed to set up correct print settings that work correctly in chrome and firefox but not safari or edge.
In chrome and firefox my print formats to 2 pages, where as in safari and edge it formats to 4 pages.
One of the first things I set up was a "download pdf" button that downloads a nicely formatted pdf which is the exact same format as my working print settings. I also want the general print button to work and send out the same format so if my download pdf button isn't used the employer can still have a friendly print format.
If there anyway I can set it up so when print is selected from the menu it uses my pdf instead printing out the webpage? This would save me a lot of time setting up print settings for each browser and the print can be reliable across browsers.
I am open to using scripts to make this work.
javascript jquery html css printing
In JS you can use developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/… with decent browser support. But AFAIK you cannot prevent the real print dialog, your JS just runs before/after it
– elveti
Nov 12 at 21:53
add a comment |
Currently I am a junior developer who is trying to create github.io resume that is friendly for employers. I worked in chrome and managed to set up correct print settings that work correctly in chrome and firefox but not safari or edge.
In chrome and firefox my print formats to 2 pages, where as in safari and edge it formats to 4 pages.
One of the first things I set up was a "download pdf" button that downloads a nicely formatted pdf which is the exact same format as my working print settings. I also want the general print button to work and send out the same format so if my download pdf button isn't used the employer can still have a friendly print format.
If there anyway I can set it up so when print is selected from the menu it uses my pdf instead printing out the webpage? This would save me a lot of time setting up print settings for each browser and the print can be reliable across browsers.
I am open to using scripts to make this work.
javascript jquery html css printing
Currently I am a junior developer who is trying to create github.io resume that is friendly for employers. I worked in chrome and managed to set up correct print settings that work correctly in chrome and firefox but not safari or edge.
In chrome and firefox my print formats to 2 pages, where as in safari and edge it formats to 4 pages.
One of the first things I set up was a "download pdf" button that downloads a nicely formatted pdf which is the exact same format as my working print settings. I also want the general print button to work and send out the same format so if my download pdf button isn't used the employer can still have a friendly print format.
If there anyway I can set it up so when print is selected from the menu it uses my pdf instead printing out the webpage? This would save me a lot of time setting up print settings for each browser and the print can be reliable across browsers.
I am open to using scripts to make this work.
javascript jquery html css printing
javascript jquery html css printing
asked Nov 12 at 18:53
archaicGhost
52
52
In JS you can use developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/… with decent browser support. But AFAIK you cannot prevent the real print dialog, your JS just runs before/after it
– elveti
Nov 12 at 21:53
add a comment |
In JS you can use developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/… with decent browser support. But AFAIK you cannot prevent the real print dialog, your JS just runs before/after it
– elveti
Nov 12 at 21:53
In JS you can use developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/… with decent browser support. But AFAIK you cannot prevent the real print dialog, your JS just runs before/after it
– elveti
Nov 12 at 21:53
In JS you can use developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/… with decent browser support. But AFAIK you cannot prevent the real print dialog, your JS just runs before/after it
– elveti
Nov 12 at 21:53
add a comment |
1 Answer
1
active
oldest
votes
You can consider jspdf, or you can write @media print
and identify styles you want printed and how it should appear.
Regarding your latest comment - since your page is only static elements, why don't you simply create a PDF, upload it to your server, and provide a linked button to the PDF. Simplest way is to create something in Photoshop (or even simpler - in MS Word), save it as a PDF and go that route.
Yeah I have an @media print, but its not cross browser compatible. Sorry, I should have specified that, it is what i intent to mean when I stated print settings. I can set up settings for each browser but would prefer to take the easiest route available. I already have a pdf and would prefer when print is selected from the browser menu it prints the pdf instead of the webpage. Currently there is a button to download the pdf, to not rely on the user clicking that button I want to print settings to function correctly to.
– archaicGhost
Nov 12 at 19:57
Before the page is printed, is it loaded with dynamic information, or is the information always the same? For example, is what's being printed the contents of a shopping cart (dynamic)? Or is it the content of your "about us" page (static)?
– webfrogs
Nov 12 at 21:09
Its static, there are no dynamic elements. Its just single page made with html css.
– archaicGhost
Nov 13 at 23:13
I updated my answer.
– webfrogs
Nov 13 at 23:25
yeah I have that already, stated in my original description. From what I have found out on my own it seems what I want isn't an option. I used normalize to help some of the cross browser issues but its still not 100%. I am working on setting up print settings for safari and edge and just hope in the meantime that just my pdf button is used. I was just hoping there was a way to link that pdf to my print instead of having to set up different media queries for each browser.
– archaicGhost
Nov 15 at 0:05
|
show 3 more comments
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%2f53268373%2fset-pdf-to-be-printed-instead-of-webpage%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can consider jspdf, or you can write @media print
and identify styles you want printed and how it should appear.
Regarding your latest comment - since your page is only static elements, why don't you simply create a PDF, upload it to your server, and provide a linked button to the PDF. Simplest way is to create something in Photoshop (or even simpler - in MS Word), save it as a PDF and go that route.
Yeah I have an @media print, but its not cross browser compatible. Sorry, I should have specified that, it is what i intent to mean when I stated print settings. I can set up settings for each browser but would prefer to take the easiest route available. I already have a pdf and would prefer when print is selected from the browser menu it prints the pdf instead of the webpage. Currently there is a button to download the pdf, to not rely on the user clicking that button I want to print settings to function correctly to.
– archaicGhost
Nov 12 at 19:57
Before the page is printed, is it loaded with dynamic information, or is the information always the same? For example, is what's being printed the contents of a shopping cart (dynamic)? Or is it the content of your "about us" page (static)?
– webfrogs
Nov 12 at 21:09
Its static, there are no dynamic elements. Its just single page made with html css.
– archaicGhost
Nov 13 at 23:13
I updated my answer.
– webfrogs
Nov 13 at 23:25
yeah I have that already, stated in my original description. From what I have found out on my own it seems what I want isn't an option. I used normalize to help some of the cross browser issues but its still not 100%. I am working on setting up print settings for safari and edge and just hope in the meantime that just my pdf button is used. I was just hoping there was a way to link that pdf to my print instead of having to set up different media queries for each browser.
– archaicGhost
Nov 15 at 0:05
|
show 3 more comments
You can consider jspdf, or you can write @media print
and identify styles you want printed and how it should appear.
Regarding your latest comment - since your page is only static elements, why don't you simply create a PDF, upload it to your server, and provide a linked button to the PDF. Simplest way is to create something in Photoshop (or even simpler - in MS Word), save it as a PDF and go that route.
Yeah I have an @media print, but its not cross browser compatible. Sorry, I should have specified that, it is what i intent to mean when I stated print settings. I can set up settings for each browser but would prefer to take the easiest route available. I already have a pdf and would prefer when print is selected from the browser menu it prints the pdf instead of the webpage. Currently there is a button to download the pdf, to not rely on the user clicking that button I want to print settings to function correctly to.
– archaicGhost
Nov 12 at 19:57
Before the page is printed, is it loaded with dynamic information, or is the information always the same? For example, is what's being printed the contents of a shopping cart (dynamic)? Or is it the content of your "about us" page (static)?
– webfrogs
Nov 12 at 21:09
Its static, there are no dynamic elements. Its just single page made with html css.
– archaicGhost
Nov 13 at 23:13
I updated my answer.
– webfrogs
Nov 13 at 23:25
yeah I have that already, stated in my original description. From what I have found out on my own it seems what I want isn't an option. I used normalize to help some of the cross browser issues but its still not 100%. I am working on setting up print settings for safari and edge and just hope in the meantime that just my pdf button is used. I was just hoping there was a way to link that pdf to my print instead of having to set up different media queries for each browser.
– archaicGhost
Nov 15 at 0:05
|
show 3 more comments
You can consider jspdf, or you can write @media print
and identify styles you want printed and how it should appear.
Regarding your latest comment - since your page is only static elements, why don't you simply create a PDF, upload it to your server, and provide a linked button to the PDF. Simplest way is to create something in Photoshop (or even simpler - in MS Word), save it as a PDF and go that route.
You can consider jspdf, or you can write @media print
and identify styles you want printed and how it should appear.
Regarding your latest comment - since your page is only static elements, why don't you simply create a PDF, upload it to your server, and provide a linked button to the PDF. Simplest way is to create something in Photoshop (or even simpler - in MS Word), save it as a PDF and go that route.
edited Nov 13 at 23:25
answered Nov 12 at 18:59
webfrogs
1,16632347
1,16632347
Yeah I have an @media print, but its not cross browser compatible. Sorry, I should have specified that, it is what i intent to mean when I stated print settings. I can set up settings for each browser but would prefer to take the easiest route available. I already have a pdf and would prefer when print is selected from the browser menu it prints the pdf instead of the webpage. Currently there is a button to download the pdf, to not rely on the user clicking that button I want to print settings to function correctly to.
– archaicGhost
Nov 12 at 19:57
Before the page is printed, is it loaded with dynamic information, or is the information always the same? For example, is what's being printed the contents of a shopping cart (dynamic)? Or is it the content of your "about us" page (static)?
– webfrogs
Nov 12 at 21:09
Its static, there are no dynamic elements. Its just single page made with html css.
– archaicGhost
Nov 13 at 23:13
I updated my answer.
– webfrogs
Nov 13 at 23:25
yeah I have that already, stated in my original description. From what I have found out on my own it seems what I want isn't an option. I used normalize to help some of the cross browser issues but its still not 100%. I am working on setting up print settings for safari and edge and just hope in the meantime that just my pdf button is used. I was just hoping there was a way to link that pdf to my print instead of having to set up different media queries for each browser.
– archaicGhost
Nov 15 at 0:05
|
show 3 more comments
Yeah I have an @media print, but its not cross browser compatible. Sorry, I should have specified that, it is what i intent to mean when I stated print settings. I can set up settings for each browser but would prefer to take the easiest route available. I already have a pdf and would prefer when print is selected from the browser menu it prints the pdf instead of the webpage. Currently there is a button to download the pdf, to not rely on the user clicking that button I want to print settings to function correctly to.
– archaicGhost
Nov 12 at 19:57
Before the page is printed, is it loaded with dynamic information, or is the information always the same? For example, is what's being printed the contents of a shopping cart (dynamic)? Or is it the content of your "about us" page (static)?
– webfrogs
Nov 12 at 21:09
Its static, there are no dynamic elements. Its just single page made with html css.
– archaicGhost
Nov 13 at 23:13
I updated my answer.
– webfrogs
Nov 13 at 23:25
yeah I have that already, stated in my original description. From what I have found out on my own it seems what I want isn't an option. I used normalize to help some of the cross browser issues but its still not 100%. I am working on setting up print settings for safari and edge and just hope in the meantime that just my pdf button is used. I was just hoping there was a way to link that pdf to my print instead of having to set up different media queries for each browser.
– archaicGhost
Nov 15 at 0:05
Yeah I have an @media print, but its not cross browser compatible. Sorry, I should have specified that, it is what i intent to mean when I stated print settings. I can set up settings for each browser but would prefer to take the easiest route available. I already have a pdf and would prefer when print is selected from the browser menu it prints the pdf instead of the webpage. Currently there is a button to download the pdf, to not rely on the user clicking that button I want to print settings to function correctly to.
– archaicGhost
Nov 12 at 19:57
Yeah I have an @media print, but its not cross browser compatible. Sorry, I should have specified that, it is what i intent to mean when I stated print settings. I can set up settings for each browser but would prefer to take the easiest route available. I already have a pdf and would prefer when print is selected from the browser menu it prints the pdf instead of the webpage. Currently there is a button to download the pdf, to not rely on the user clicking that button I want to print settings to function correctly to.
– archaicGhost
Nov 12 at 19:57
Before the page is printed, is it loaded with dynamic information, or is the information always the same? For example, is what's being printed the contents of a shopping cart (dynamic)? Or is it the content of your "about us" page (static)?
– webfrogs
Nov 12 at 21:09
Before the page is printed, is it loaded with dynamic information, or is the information always the same? For example, is what's being printed the contents of a shopping cart (dynamic)? Or is it the content of your "about us" page (static)?
– webfrogs
Nov 12 at 21:09
Its static, there are no dynamic elements. Its just single page made with html css.
– archaicGhost
Nov 13 at 23:13
Its static, there are no dynamic elements. Its just single page made with html css.
– archaicGhost
Nov 13 at 23:13
I updated my answer.
– webfrogs
Nov 13 at 23:25
I updated my answer.
– webfrogs
Nov 13 at 23:25
yeah I have that already, stated in my original description. From what I have found out on my own it seems what I want isn't an option. I used normalize to help some of the cross browser issues but its still not 100%. I am working on setting up print settings for safari and edge and just hope in the meantime that just my pdf button is used. I was just hoping there was a way to link that pdf to my print instead of having to set up different media queries for each browser.
– archaicGhost
Nov 15 at 0:05
yeah I have that already, stated in my original description. From what I have found out on my own it seems what I want isn't an option. I used normalize to help some of the cross browser issues but its still not 100%. I am working on setting up print settings for safari and edge and just hope in the meantime that just my pdf button is used. I was just hoping there was a way to link that pdf to my print instead of having to set up different media queries for each browser.
– archaicGhost
Nov 15 at 0:05
|
show 3 more comments
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53268373%2fset-pdf-to-be-printed-instead-of-webpage%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
In JS you can use developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/… with decent browser support. But AFAIK you cannot prevent the real print dialog, your JS just runs before/after it
– elveti
Nov 12 at 21:53