0

I have made a website resume that looks nice on the browser but quite horrible when the user tries to print. I could try play with CSS to improve the print styles but even then it's hard to guarantee it would look like a curated PDF resume.

My question is, is there a way to replace the page with a pre-made PDF the moment the user hits print? I tried the following with partial success:

Placed <embed src= "main.pdf" id="print-pdf"> inside the main html body. Then for styling:

@media screen {
  #print-pdf {
    display: none;
  }
}

@media print {
  #print-pdf {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
  }
}

When printing it does overlay the embed element over the whole page but the PDF is not rendered. It does render it nonetheless if I enable the block in screen media. It seems enabling it only for print media does not give it enough time to load before the print routine takes the snapshot.

Improve this question
1
  • 2
    Not an answer, but isn't some "Download as PDF" button will be easier solution for the problem you have? Commented Jan 23, 2019 at 16:46

1 Answer 1

Reset to default
2

The best option is to work on the media queries to get the website looking it's best under all scenarios.

It's the most supportable option from your perspective, too. You won't have to maintain data in 2 locations and you can work on making that one location look and feel its best.

Presenting a "download as PDF" button would help, but it's not a guarantee that someone won't try and print the page anyway and it's best to have all bases covered ...

Have the download as pdf button if you wish, but make sure the website performs under all scenarios and hide that download button in the media query.

It's the world we live in.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Indeed the easiest workaround. Hahaha, "It's the world we live in" is the right mindset in web development.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.