Print in A3 and A4 format

Question

I need to develop something that can print in A3 and A4 formats, exactly the same as this site:

http://mapas.fortaleza.ce.gov.br

Note that by clicking on the print icon first it resizes in the correct format and then by clicking on Print, it shows the preview exactly as it wants in the print, only with the map, centered and the required format.

To be quite honest, I don’t even have a basis on how to do this, because I’ve never done it. I’m using Javascript with Leaflet, how should I proceed? I don’t have backend language yet, but they are still deciding between developing using Java or Python, unfortunately this is not my decision. I would like you to give me just a north of what to do and how to do and if possible some example, some plugin or framework that I can use for such.

Thank you!!

Answer 1

You can use the @media print CSS rule and start hiding menus and other things you don’t want to print

@media print {    
.no-print, .no-print * {
    display: none !important;
  }
}

Then when you open the print screen in javascript

window.print();

Anything that has the no-print class will not be shown on the print screen of the browser, you can also customize the size of what you want to print inside the CSS @media print {}, on the default print screen you can change the layout and size of the paper, then you can go testing and adjusting what you want to show. Hope you helped