0

I have a html and css file that looks like this :

<head>
  bootstrap
</head>

<body>
  <h2 class="bootstrap style">   HELLO </h2>
</body>

i now want to give the user an option to download this web page as a pdf.

By clicking a button.

What I have tried:

I've looked at html to pdf converter in Javascript however i don't think that includes the styles.

I was also wondering if there was a built in html attribute that may help with this.

Ryan Hinchliffe
  • 87
  • 1
  • 8
  • 1
    Does this answer your question? [Is it possible to save HTML page as PDF using JavaScript or jquery?](https://stackoverflow.com/questions/6896592/is-it-possible-to-save-html-page-as-pdf-using-javascript-or-jquery) – tbhaxor Jan 13 '20 at 09:06
  • 1
    you can use print to pdf functionality of the browser https://www.sitepoint.com/css-printer-friendly-pages/ – Andam Jan 13 '20 at 09:21

1 Answers1

0

If styles isn't shown on print, you should use @media print{} in your css file and include all needed styles inside. then use window.print() in javascript to print page.

Simple example:

function print_content() {
  window.print();
}
@media print {
  #content {
    background-color: beige;
    text-align: center;
    padding: 20px;
  }
  #content button {
    display: none;
  }
}
<div id="content">
  <h1>Heading of the paragraph</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

  <button onclick="print_content()">click me to Print</button>
</div>

For more options read this

Designing For Print With CSS

https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/

DohaHelmy
  • 770
  • 1
  • 7
  • 19