0

I need to print a receipt for a school project I'm working on. I'm trying to print the page which contains this receipt by using window.print(). Only when I press the print button it doesn't print anything and just gives me a blank PDF

<div id='bon_overzicht'>
                 <table id='bon'>
                      <thead>
                           <tr>
                                <th>Product</th>
                                <th>Aantal</th>
                                <th>Prijs p/s</th>
                                <th>Totaal</th>
                           </tr>
                      </thead>
                      <tbody>   <tr>
                                <td>Biefstuk in champignonsaus</td>
                                <td>2</td>
                                <td>&euro;&nbsp;11,95</td>
                                <td>&euro;&nbsp;23,90</td>
                           </tr>   <tr>
                                <td>Chocolademousse</td>
                                <td>3</td>
                                <td>&euro;&nbsp;4,95</td>
                                <td>&euro;&nbsp;14,85</td>
                           </tr>   <tr>
                                <td>Groentesoep</td>
                                <td>1</td>
                                <td>&euro;&nbsp;3,95</td>
                                <td>&euro;&nbsp;3,95</td>
                           </tr>   <tr>
                                <td>Aspergesoep</td>
                                <td>3</td>
                                <td>&euro;&nbsp;4,95</td>
                                <td>&euro;&nbsp;14,85</td>
                           </tr>   <tr>
                                <td>Bonengerecht met diverse groen</td>
                                <td>1</td>
                                <td>&euro;&nbsp;11,95</td>
                                <td>&euro;&nbsp;11,95</td>
                           </tr>   <tr>
                                <td>Per glas</td>
                                <td>1</td>
                                <td>&euro;&nbsp;3,95</td>
                                <td>&euro;&nbsp;3,95</td>
                           </tr>   <tr>
                                <td>Koffie verkeerd</td>
                                <td>3</td>
                                <td>&euro;&nbsp;2,95</td>
                                <td>&euro;&nbsp;8,85</td>
                           </tr>   <tr>
                                <td>Portie kaas met mosterd</td>
                                <td>1</td>
                                <td>&euro;&nbsp;4,00</td>
                                <td>&euro;&nbsp;4,00</td>
                           </tr><tr class='trBold'>
                                <td>TOTAALPRIJS</td>
                                <td colspan='3'>&euro;&nbsp;86,30</td>
                           </tr>
                      </tbody>
                 </table>
            </div>

How do I make sure this DIV gets printed? Any help would be appreciated.

Uccino _
  • 35
  • 1
  • 6
  • 1
    There is nothing obvious in the HTML you've provided which should result in anything being hidden. Use your developer tools (F12) and check whether you have any CSS which is controlled by `@media screen` or `@media print` that might be hiding things while you're printing – freefaller Dec 10 '19 at 10:56
  • 1
    @freefaller do you know how to filter on ```@media screen``` or ```@media print```? I can't seem to find the problem. I know it's a CSS thing yet I'm not so sure which CSS class might be messing with the printing – Uccino _ Dec 10 '19 at 11:18
  • Good point, it's not easy. If you're using Chrome, it's possible to change the emulated view [using these instructions](https://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode). If you're using Firefox, you can do the same [using these instructions](https://stackoverflow.com/a/56182372/930393). Then you can find the element and see what CSS is being applied (you might need to click on a few elements before you find the specific one). Good luck – freefaller Dec 10 '19 at 11:50

1 Answers1

-1

Tried it..it works

$( document ).ready(function() {
  window.print(); 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='bon_overzicht'>
                 <table id='bon'>
                      <thead>
                           <tr>
                                <th>Product</th>
                                <th>Aantal</th>
                                <th>Prijs p/s</th>
                                <th>Totaal</th>
                           </tr>
                      </thead>
                      <tbody>   <tr>
                                <td>Biefstuk in champignonsaus</td>
                                <td>2</td>
                                <td>&euro;&nbsp;11,95</td>
                                <td>&euro;&nbsp;23,90</td>
                           </tr>   <tr>
                                <td>Chocolademousse</td>
                                <td>3</td>
                                <td>&euro;&nbsp;4,95</td>
                                <td>&euro;&nbsp;14,85</td>
                           </tr>   <tr>
                                <td>Groentesoep</td>
                                <td>1</td>
                                <td>&euro;&nbsp;3,95</td>
                                <td>&euro;&nbsp;3,95</td>
                           </tr>   <tr>
                                <td>Aspergesoep</td>
                                <td>3</td>
                                <td>&euro;&nbsp;4,95</td>
                                <td>&euro;&nbsp;14,85</td>
                           </tr>   <tr>
                                <td>Bonengerecht met diverse groen</td>
                                <td>1</td>
                                <td>&euro;&nbsp;11,95</td>
                                <td>&euro;&nbsp;11,95</td>
                           </tr>   <tr>
                                <td>Per glas</td>
                                <td>1</td>
                                <td>&euro;&nbsp;3,95</td>
                                <td>&euro;&nbsp;3,95</td>
                           </tr>   <tr>
                                <td>Koffie verkeerd</td>
                                <td>3</td>
                                <td>&euro;&nbsp;2,95</td>
                                <td>&euro;&nbsp;8,85</td>
                           </tr>   <tr>
                                <td>Portie kaas met mosterd</td>
                                <td>1</td>
                                <td>&euro;&nbsp;4,00</td>
                                <td>&euro;&nbsp;4,00</td>
                           </tr><tr class='trBold'>
                                <td>TOTAALPRIJS</td>
                                <td colspan='3'>&euro;&nbsp;86,30</td>
                           </tr>
                      </tbody>
                 </table>
            </div>
Praveen Gopal
  • 529
  • 8
  • 23