HTML/CCS print function

Question

I'm creating a website and I want to add a button to print the page. I was able to do it, as it would print with ctrl+P, but the structure gets all changed and it looks bad.

<div class="header-content">
     <h2 id="Feed">
          <button onclick="printFunction()">Imprimir</button>
          <script>function printFunction(){window.print();}</script>
     </h2>
</div>

Is there other way to do print? Like if it was a print screen

Possible duplicate of [Print
only?](https://stackoverflow.com/questions/468881/print-div-id-printarea-div-only) — Salvatore, Aug 10 '18 at 15:57

score 0 · Accepted Answer · answered Aug 10 '18 at 19:06

When printing a webpage, the page is re-rendered to fit the page rather than taking a sort of screenshot and printing that. This allows developers to create custom styles to aid the page to be printed to paper which is inherently different from laying it out on the screen.

There is a way to get something similar to what you want using canvas as outlined here: Using HTML5/Canvas/JavaScript to take in-browser screenshots

using the tool: https://html2canvas.hertzen.com/

but it's not perfect and I don't believe it's possible to get a perfect screenshot without using a browser extension.

HTML/CCS print function

1 Answers1