Printing area not working properly in print js

Question

I am trying to implementing POS printing using print js (https://printjs.crabbly.com/) . I am using it in laravel framework. It's working but I can not use any css effect on it. I also tried but not working .

Here is my expected invoice format

              My CAFE

     Item 1             10 USD
     Item 2              5 USD
     -------------------------
                 Total: 15 USD
                   Vat:  2 USD

Here is My code

    <div id="printAreaInvoice" style="visibility: hidden;width: 450px;">
        <p class="address">
           My Cafe <br>
        </p>

        <p>
          <span> Item 1 </span>  <span class="price"> 10 </span>
          <span> Item 2 </span>  <span class="price"> 05 </span>
        </p>
        
        <p>
          ----------------------------------------
          <span class="price"> Total 15 </span>
        </p>
    </div>

$(document).on('click','#print_order',function () {
    printJS({
        maxWidth: 450, // the width of my paper
        printable: 'printAreaInvoice', // the id
        type: 'html',
        css: '{{ asset("Dashboard/print/print.css") }}'
    });
});

in print.css

@media print {
    #print p {
        font-size: 10pt;
    }
    #print .address{
        font-size: 10pt;
        text-align: center;
    }
    #print .price{
        font-size: 10pt;
        float: right;
    }
}

score 1 · Accepted Answer · edited Aug 30 '20 at 12:52

1

Try removing the #print before every tag in the print.css files. Those styles are already active in the print media thanks to @media print.

Your print.css should look like:

@media print{
    p{
        font-size: 10pt;
    }
    .address{
        font-size: 10pt;
        text-align: center;
    }
    .price{
        font-size: 10pt;
        float: right;
    }
}

If the URL to the CSS is correct, the printing preview should show the correct style.

edited Aug 30 '20 at 12:52

Dan

61,568
9
61
78

answered Aug 30 '20 at 12:36

trolloldem

669
4
9

Thanks a lot. I have a question . Here I am fetching data by ajax from backend and append it in hidden div after that I am printing. Is there any efficient way to print direct ? can you please show the demo code ? – Mithun Aug 31 '20 at 03:26
With "print direct" are you asking if there is a way to print without showing the print panel or if in your script there is a way to avoid clicking and going directly in the print panel? – trolloldem Aug 31 '20 at 08:43
Thanks for reply. Yes . I want to avoid clicking and it will print atomically . I mean no pop up will be shown for print – Mithun Aug 31 '20 at 14:19
I don't think you can handle that using some code in JavaScript, at least not in a general way. You could setup some extension in Chrome that accepts every print request; but allowing a js script ti print without asking could be seen as a security problem. What you can do in your code is placing your PrintJS function at the end of the function you're using tò fetch the data from the backend. – trolloldem Aug 31 '20 at 16:53

Printing area not working properly in print js

1 Answers1