Mahmoud Al-HabashOpen to new projects
  • WorkWork
  • ServicesServices
  • LabLab
  • WritingWriting
  • ContactContact
Amman--:--عربي
Writing/Livewire

Building Print Preview with Livewire v4

Create printable views with Livewire.

1 February 20261 min readLivewireاقرأ بالعربية

On this page

  1. Component

Build a print preview feature.

Component

blade
<div>
    <button onclick="window.print()">Print</button>
    
    <div class="print:block hidden" id="printable">
        <h1>{{ $invoice->number }}</h1>
        <!-- Invoice content -->
    </div>
</div>

<style>
@media print {
    body * { visibility: hidden; }
    #printable, #printable * { visibility: visible; }
    #printable { position: absolute; left: 0; top: 0; }
}
</style>
All articles

Keep reading

  • Authorization in Livewire v4 Components1 February 20261 min read
  • Blaze Pre-Compiler: Massive Performance Gains in Livewire v41 February 20261 min read
  • Building a Bookmark Feature with Livewire v41 February 20261 min read