Açık Kaynak JavaScript PDF Görüntüleyici Kitaplığı
Bu Ücretsiz ve Açık Kaynak JavaScript API'sini PDF Ayrıştırıcı, Görüntüleyici, Okuyucu ve Oluşturucu kitaplığı olarak deneyin.
PDF.js nedir?
PDF.js, Mozilla tarafından geliştirilen ve PDF (Taşınabilir Belge Formatı) belgelerinin tarayıcıda görüntülenmesine olanak tanıyan açık kaynaklı bir JavaScript ve HTML5 tabanlı PDF görüntüleme kitaplığıdır.
PDF.js aşağıda listelenen çeşitli özellikleri destekler:
- PDF'leri Oluşturma: PDF belgelerini web tarayıcılarında açabilir ve görüntüleyebilir, okuyabilir veya oluşturabilirsiniz.
- PDF'leri Yazdır/Kaydet: PDF.js ayrıca PDF belgelerini favori web tarayıcınızdan yazdırmanıza veya kaydetmenize de olanak tanır.
- Sunum Modu: Sunum modunu kullanarak PDF sayfalarını tam ekranda gösterebilir ve her sayfada bir sunum slaydı gibi gezinebilirsiniz.
- PDF Gezinme: PDF.js, sonraki veya önceki sayfalara geçebileceğiniz daha kolay gezinme kontrolleri sağlar. Ayrıca sayfa numarasını girerek istediğiniz sayfaya hızlı bir şekilde geçebilirsiniz.
- PDF Açıklaması: PDF sayfalarına metin, resim veya çizim ekleyerek de PDF belgelerine açıklama ekleyebilirsiniz.
- PDF Sayfalarını Döndürme: PDF.js'yi kullanarak PDF sayfalarını saat yönünde veya saat yönünün tersine de döndürebilirsiniz.
- Kayan PDF: PDF.js, sayfaları yatay veya dikey olarak vb. kaydırmak için güzel kontroller sunar.
- PDF Belgesi Özellikleri: Son olarak, PDF.js görüntüleyiciyi kullanarak PDF belgelerinin özelliklerini tarayıcıda da görüntüleyebilirsiniz.
PDF.js'ye Başlarken
PDF.js'yi edinmenin ve web projelerinizde kullanmaya başlamanın üç yolu vardır.
1. Kaynaktan oluşturun
PDF.js deposunu GitHub'dan kopyalayabilir ve Node.js, gulp ve PDF.js bağımlılıklarını aşağıdaki adımları izleyerek çözebilirsiniz:
Yerel makinede PDF.js git deposunu kopyalayın ve pdf.js klasörüne geçin
git clone https://github.com/mozilla/pdf.js.git
cd pdf.js
Node.js'yi yükleyin
https://nodejs.org/en/download
Gulp paketini global olarak yükleyin
npm install -g gulp-cli
PDF.js bağımlılıklarını yükleyin
npm install
Gulp sunucusunu çalıştırın ve tarayıcıda http://localhost:8888/web/viewer.html adresindeki görüntüleyiciyi açın.
gulp server
2. Önceden oluşturulmuş dağıtımı kullanın
PDF.js ayrıca GitHub'daki PDF.js sürümlerinde bulabileceğiniz kaynak koduyla birlikte önceden oluşturulmuş dağıtımlar da sunar . Önceden oluşturulmuş PDF.js kütüphanesini indirebilir ve kullanmaya başlayabilirsiniz.
3. Barındırılan kütüphaneyi CDN aracılığıyla kullanın
PDF.js ayrıca ücretsiz CDN sunucularında da barındırılmaktadır. Aşağıda birkaç bağlantı paylaşılmıştır:
- https://cdnjs.com/libraries/pdf.js
- https://www.jsdelivr.com/package/npm/pdfjs-dist
- https://unpkg.com/pdfjs-dist
PDF.js Görüntüleyiciyi çalıştırın
GitHub'dan önceden oluşturulmuş bir dağıtım kitaplığını indirip çıkardıktan sonra iki klasör bulacaksınız: build ve web. PDF.js kitaplık dosyaları build klasöründe bulunabilir; burada web klasörü viewer.html, viewer.css, viewer.js ve ilgili dosyaları içeren bir görüntüleyici projesi içerir. Viewer.html kodunu kontrol ederseniz, derleme klasöründen ve diğer ilgili css ve js dosyalarından pdf.js kütüphanesine referans verdiğini görebilirsiniz.
PDF.js görüntüleyicinin nasıl göründüğünü görmek için tarayıcıda viewer.html dosyasını çalıştıralım:
PDF Belgelerini Oluşturun/Görüntüleyin
PDF.js görüntüleyici kitaplığını kullanarak bir PDF belgesini tarayıcıda basitçe oluşturmak veya görüntülemek için, PDF.js kitaplığını script etiketini kullanarak HTML belge başlığımıza dahil etmeli, bir canvas HTML gövdesine ekleyin ve ardından pdfjsLib'i kullanmak için gerekli JavaScript kodunu ekleyin ve nesnelerin PDF belgesinin eşzamansız yüklenmesini ve oluşturulmasını işlemesini sağlayın.
Yukarıdaki kod, aşağıdaki gibi herhangi bir kullanıcı arayüzü veya kontrolü olmadan tarayıcıya yalnızca bir PDF belgesi yükler:
Çevrimiçi Demo
Bu tam özellikli çevrimiçi deneyin PDF.js kitaplığının tüm özelliklerini keşfetmek için PDF.js Görüntüleyici demosu.
Çözüm
PDF.js, güçlü bir topluluğa sahip ücretsiz ve açık kaynaklı JavaScrpit PDF görüntüleyici kitaplığıdır. Hem modern hem de eski tarayıcılar için çapraz tarayıcı desteği sağlar. Evet, eski tarayıcılardaki kullanıcı deneyimi modern tarayıcılarla aynı olmayabilir ancak yine de ücretsiz bir kitaplık olarak iyidir. Güvenlidir ve özelleştirilebilir. Özellikler sınırlıdır ancak bir PDF görüntüleyici olarak harika çalışır.
PDF.js, web tabanlı bir PDF görüntüleyici oluşturmak için güzel API'ler ve mimari sağlar. Geliştiricilerin zamanından tasarruf etmek amacıyla görüntüleyiciye daha fazla kullanıcı arayüzü denetimi eklemek zaman alıcı olduğundan, PDF.js ayrıca bulabileceğiniz tam işlevsel ve zengin özelliklere sahip bir PDF görüntüleyicinin kaynak kodunu da sağlar (viewer.html, viewer.js ve viewer.css vb.) PDF.js kitaplık dağıtım paketinin web klasörüne yerleştirin.