vue-pdf-export: açık kaynak kütüphanesi, tarayıcı tarafında PDF üretimini Vue 3 ve Nuxt'a getiriyor

Bir geliştirici, Vue 3 uygulamalarına doğrudan tarayıcı içinde PDF üretimi ekleyen açık kaynak bir kütüphane olan vue-pdf-export'u yayımladı. dev.to'daki bir yazıda Saurabh Zaiswal, projenin farklı Vue projelerinde aynı PDF özelliklerini tekrar tekrar uygulamasından ve bu mantığı her seferinde yeniden inşa etmek yerine tek bir yeniden kullanılabilir çözüm istemesinden doğduğunu anlatıyor.

Kütüphanenin kapsamı

Duyuruya göre kütüphane TypeScript ile yazılmış ve iki render yolu sunuyor: HTML ve CSS çıktısını birebir eşleştirmenin öncelik olduğu durumlar için bir canvas modu, metni seçilmesi, aranması ve kopyalanması gereken belgeler için ise seçilebilir metin modu. Bu çekirdeğin etrafında, genellikle parça parça bir araya getirilmesi gereken yetenekleri paketliyor — otomatik ve manuel sayfalama, üstbilgiler ve altbilgiler, sayfa hedeflemeli filigranlar, tıklanabilir PDF bağlantıları, parola koruması ve izin ayarları, PDF metadata ve sıkıştırma, iptal edilebilen ilerleme raporlama ve büyük belgeler için işleme. Önizleme, indirme ve tarayıcıdan yazdırma kutudan çıktığı gibi destekleniyor.

Kütüphane ayrıca export'ları mevcut bir arayüze uydurmak için pratik dokunuşlar içeriyor. data-pdf-ignore özniteliği geliştiricilerin belirli UI elemanlarını export dışında bırakmasını sağlıyor ve yalnızca export'a özgü sayfa ve gövde stilleri, sadece üretilen PDF'te görünen stiller uygulamayı mümkün kılıyor.

Kurulum npm install vue-pdf-export ile her zamanki deseni izliyor ve yazar, npm, pnpm, Yarn — Plug'n'Play modu dahil — ve Bun ile uyumluluğu not ediyor.

Bileşen tabanlı API

Kullanım bir Html2Pdf bileşeni etrafında kurulmuş. PDF'e gidecek içerik bir pdf-content slot'una yerleştiriliyor ve bir template ref, bir butondan veya sayfanın başka bir yerinden export tetiklemek için generatePdf() gibi metotları ortaya çıkarıyor. Render yolu bir prop ile seçiliyor: görsel ağırlıklı düzenler için canvas modu, raporlar, faturalar, ekstreler ve dokümantasyon gibi metin ağırlıklı belgeler için metin modu.

Çıktı yalnızca dosya indirmesiyle sınırlı değil. Bileşen, Blob döndüren generatePdf()'e ek olarak generatePdfArrayBuffer() ve generatePdfBase64() sunuyor ve yazıda desteklenen çıktılar arasında PDF data URL'leri de listeleniyor. Yazara göre bu, PDF'in anında kaydedilmek yerine yüklenmesi, saklanması, önizlenmesi veya başka bir API'ye verilmesi gereken durumları kapsıyor.

Nuxt ve sunucu tarafı render

Paket, kendisini import etmenin sunucu tarafı render sırasında Nuxt uygulamalarını bozmayacağı şekilde tasarlanmış; hem Nuxt 3 hem de Nuxt 4 için SSR-güvenli import'lar sunuyor. Gerçek PDF üretimi yine de tarayıcıda gerçekleşiyor, bu yüzden tipik bir Nuxt entegrasyonu ClientOnly veya tembel istemci tarafı render gerektirebilir — bu da yalnızca tarayıcı API'sinin SSR bağlamında her zamanki özeni gerektirdiğinin bir itirafı.

Neden önemli

PDF'e export neredeyse her kurumsal uygulamada karşınıza çıkan ve göründüğü kadar basit olmayan bir özellik. Sayfalama, üstbilgiler, filigranlar, şifreleme ve tarayıcılar arası tutarlı çıktı, ekipleri ya genel amaçlı düşük seviyeli kütüphaneler artı bol miktarda yapıştırıcı kodu ya da sunucu tarafı render altyapısına itme eğiliminde. Bu kaygıları yöneten — Nuxt için SSR-güvenli kalırken hem piksel hassasiyetinde hem de seçilebilir metin çıktısını destekleyen — Vue'ya özgü bir bileşen, Vue ekipleri için bu işin önemli bir kısmını ortadan kaldırıyor.

Yazar projeyi hâlâ gelişmekte olan bir çalışma olarak konumlandırıyor ve özellikle gerçek dünyadaki PDF uç durumları, API ergonomisi, sayfalama davranışı ve büyük belge performansı konusunda Vue ve Nuxt geliştiricilerinden açıkça geri bildirim istiyor; bu da onu bitmiş bir ürün değil, izlenmeye değer bir kütüphane yapıyor.