Laravel中使用Print.js实现POS打印时CSS样式不生效问题求助

Let's break down why your CSS isn't working and fix it step by step:

1. Core Issue: Mismatched CSS Selectors #

Your print area has an ID of printAreaInvoice, but your CSS uses #print as the parent selector—this means none of your styles are targeting the right elements! That's the biggest reason your styles aren't applying.

2. Fix the CSS #

Update your print.css to use the correct ID, and simplify the styles (you don't necessarily need @media print here because Print.js handles the print context separately):

#printAreaInvoice {
    width: 450px;
}

#printAreaInvoice p { 
    font-size: 10pt; 
    margin: 4px 0;
} 

#printAreaInvoice .address { 
    font-size: 10pt; 
    text-align: center; 
    font-weight: bold;
} 

#printAreaInvoice .price { 
    font-size: 10pt; 
    float: right; 
}

#printAreaInvoice .item {
    clear: both;
    margin: 4px 0;
}

3. Clean Up Your HTML Structure #

Your current HTML has items crammed into a single <p> tag, which will cause layout issues. Let's restructure it to match your desired invoice format:

<div id="printAreaInvoice" style="display: none;"> 
    <p class="address">My CAFE</p> 

    <div class="item">
        <span>Item 1</span>
        <span class="price">10 USD</span>
    </div>

    <div class="item">
        <span>Item 2</span>
        <span class="price">5 USD</span>
    </div>

    <p>-------------------------</p>

    <div class="item">
        <span>Total:</span>
        <span class="price">15 USD</span>
    </div>

    <div class="item">
        <span>Vat:</span>
        <span class="price">2 USD</span>
    </div>
</div>

• Changed visibility:hidden to display:none—this hides the element from your page but still lets Print.js access its content.
• Split items into individual .item containers to ensure each line breaks correctly, and added clear:both to the .item class to fix float layout issues.

4. Tweak Your Print.js Configuration #

Add the scanStyles parameter to ensure Print.js picks up all your styles, and double-check your CSS asset path (make sure the URL resolves correctly in your browser):

$(document).on('click','#print_order',function () { 
    printJS({ 
        maxWidth: 450,
        printable: 'printAreaInvoice',
        type: 'html',
        css: '{{ asset("Dashboard/print/print.css") }}',
        scanStyles: true // Ensures Print.js scans and applies all styles
    }); 
});

5. Verify the CSS Path #

Test the CSS URL directly in your browser (e.g., https://your-domain.com/Dashboard/print/print.css) to make sure it loads correctly. If it doesn't, adjust the path in the asset() helper—Laravel's asset() points to the public folder, so your CSS should be located at public/Dashboard/print/print.css.

These changes should resolve your styling issues and get your invoice printing exactly as you want it.

内容的提问来源于stack exchange，提问作者Mithun