CODEWITHSUNDEEP
javascripthtmlcss
Alejandro Daniel Noel
Alejandro Daniel Noel

Reputation: 672

How to replace website with PDF when printing

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.

Upvotes: 0

Views: 209

Answers (1)

Benjamin James Kippax
Benjamin James Kippax

Reputation: 653

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.

Upvotes: 1

Related Questions