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

Building PDF Viewer with Livewire v4

Display PDF documents in components.

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

On this page

  1. Component

Display PDFs with PDF.js.

Component

blade
<div>
    <iframe 
        src="{{ $pdfUrl }}" 
        width="100%" 
        height="600px">
    </iframe>
    
    <!-- Or with PDF.js -->
    <div 
        wire:ignore
        x-data
        x-init="pdfjsLib.getDocument('{{ $pdfUrl }}').promise.then(pdf => { ... })">
        <canvas x-ref="canvas"></canvas>
    </div>
</div>
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