Geliştiricilerin PDF, Office ve CAD Görüntülemeyi .NET, React, Angular veya Vue Web Uygulamalarına Entegre Etme: Kullanıcı Dostu ve Verimli Adım Adım
Eğer belge ağırlıklı bir .NET uygulamasını kullanıcıların gerçekten keyif alacağı bir şeye dönüştürmeye çalışıyorsanız, PDF'leri, Word dosyalarını, Excel tablolarını, PowerPoint sunumlarını ve CAD çizimlerini işleyebilen bir görüntüleyiciye ihtiyacınız var—kullanıcıları bir masaüstü uygulaması indirmeye zorlamadan ya da harici bir bulut hizmetine bağımlı olmadan. İşte Doconut burada devreye giriyor. Sunucu taraflı bir belge görüntüleyicisi olarak, işlenmiş sayfaları desteklenen web tarayıcılarına akış olarak gönderir ve kutudan çıkınca yerel açıklama, tam metin arama (OCR dahil) ve kontrol edilen yazdırma sağlar. Bu rehberde, ASP.NET Core arka uçta Doconut’un dönüşüm motorunu yapılandırmaktan, görüntüleyiciyi React, Angular ve Vue ön yüzlerine yerleştirmeye kadar tüm iş akışını adım adım inceleyeceğiz. Pürüzsüz, verimli bir belge deneyimi sunmaya hazır mısınız? Hadi başlayalım.
1. Neden Kurumsal Web Uygulamaları İçin Ayrı Bir Görüntüleyici Önemlidir
“İndir‑ve‑aç” gizli maliyeti
- Kayıp bağlam – kullanıcılar portalı terk eder, belgeyi ayrı bir pencerede açar ve ardından nerede olduklarını hatırlamak zorunda kalırlar.
- Tutarsız render – yerel olarak yüklü Word, Excel ve CAD görüntüleyicileri dosyaları farklı yorumlayabilir, bu da yasal veya mühendislik kararlarını etkileyebilecek düzen hatalarına yol açar.
- Güvenlik riski – dosyalar kurumsal sınırların dışına kayar, denetim izlerini ve veri kaybı önleme politikalarını kabusa dönüştürür.
- Düşük verimlilik – inceleyenler sadece açıklama, arama veya yazdırma yapmak için birden fazla araçla uğraşır, onay süreçlerini yavaşlatır.
Geliştiricilerin Gerçekten İhtiyacı Olanlar
- Tarayıcıda desteklenen her formatı render et (PDF, DOCX, XLSX, PPTX, DWG, DXF, …).
- .NET arka uçları ve React, Angular veya Vue ön uçları için temiz bir API sun.
- Açıklama, tam metin arama (OCR dahil) ve kontrol edilen yazdırma ek kütüphaneler gerektirmeden içer.
- Güvenli bir şekilde ölçekle—belgeleri sunucuda işle, görüntüleri kareler halinde akışla ve ham dosyaları istemciye asla gösterme.
Doconut tüm bu kriterleri karşılıyor. Görüntüleyici kütüphanesi .NET sunucusunda çalışır, kaynak belgeleri isteğe bağlı olarak raster sayfalara dönüştürür ve bu sayfaları hafif bir HTTP uç noktası üzerinden desteklenen ön uç entegrasyonları tarafından tüketilir.
2. ASP.NET Core Uygulamasında PDF Dönüşümü İçin Doconut Ara Katmanını Yapılandırma
İlk adım, arka uçun belge karelerini, küçük resimleri ve açıklama verilerini sunabilmesi için Doconut ara katmanını kaydetmektir. Bu, ASP.NET Core istek ardışık düzenine eklenir ve önbellekleme ve istek bağlamı için sadece birkaç hizmet kaydı gerektirir.
Ara katmanı kaydetme
Gerekli hizmetleri (dağıtılmış bellek önbelleği ve HTTP bağlam erişicisi) ConfigureServices içinde ekleyin. Ardından Configure içinde Doconut uç noktasını (genellikle DocImage.axd) Doconut ara katmanına yönlendirin. Ara katman seçenekleri, güvenli renderlamayı zorunlu kılar ve dahili tanılamaları son kullanıcıdan gizler.
Lisansı başlatma
Doconut, başlangıçta bir lisans dosyasına ihtiyaç duyar. Yaygın yöntem, lisansı bir kaynak olarak gömmek ve uygulama başladığında bir akış olarak yüklemektir. Lisans akışı Doconut görüntüleyici örneğine sağlandığında SDK tamamen etkinleşir ve belgeleri işlemeye hazır hâle gelir.
Belge açma ve token alma
Bir kullanıcı belge talep ettiğinde, arka uç Doconut API'si üzerinden dosyayı açar, isteğe bağlı olarak şifre koruması, görüntü çözünürlüğü ve zaman aşımı gibi parametreleri gönderir. Doconut, açılan belgeyi benzersiz şekilde temsil eden kısa bir token (genellikle bir GUID) döndürür. Ön uç bu token'ı her kare isteğinde, örneğin /DocImage.axd?token=abcd1234&page=1&zoom=100 gibi, kullanır.
3. JavaScript Çatılar İçin Güvenli Bir Belge‑Akışı API’si Sunma
Doconut zaten ara katman üzerinden düşük seviyeli bir kare işleyici sağlasa da, çoğu ekip kimlik doğrulama, günlük kaydı ve isteğe bağlı filigran ekleme yapan ince bir sarmalayıcı denetleyici tercih eder.
Tipik denetleyici sorumlulukları
- Açma uç noktası – Bir belge kimliği alır, fiziksel dosya yolunu çözer, Doconut’u belgeyi açması için çağırır ve oluşturulan token’ı döndürür.
- Küçük resim uç noktası – Belirli bir sayfa için küçük bir PNG döndürür, gezinme çubukları için kullanışlıdır. Denetleyici, uygun sorgu dizesiyle Doconut kare işleyicisine yönlendirme yapabilir.
Güvenlik hususları
Token’ı kullanıcının oturumunda saklayın veya kısa ömürlü bir JWT claim’ine gömün. Token yalnızca sunucu tarafı önbelleği olmadan orijinal dosyayı getirilemediği için belge korunmuş olur. Aynı REST API, bu rehberde açıklanan React, Angular ve Vue entegrasyon desenlerini destekler.
4. Görüntüleyiciyi React Uygulamasına Yerleştirme
React geliştiricileri aşağıdaki işlevsel bileşeni oluşturabilir:
/openuç noktasını çağırarak istenen belge için bir token alır.- Doconut’un kare işleyicisine işaret eden görüntü URL’leri dizisini oluşturur (ilk on sayfayla başlayıp ihtiyaca göre daha fazlasını yükleyebilir).
- Sayfaları
<img>öğeleri olarak render eder, kaydırma veya yakınlaştırma olaylarını URL parametrelerini güncelleyerek yönetir.
Doconut’un JavaScript entegrasyon noktalarıyla etkileşim
Doconut, sayfaya hafif bir JavaScript yardımcı programı enjekte eder. Bu yardımcıyla şu komutları verebilirsiniz:
- Bir terimi vurgula – Belge genelinde tam metin arama isteği gönderir ve eşleşen kelimeleri vurgular.
- Bir açıklama ekle – Belirli bir sayfaya yapışkan not, damga veya çizim ekler; sayfa numarası, açıklama türü, koordinatlar ve ek veri içeren bir JSON yükü gönderilir.
Ağır render işi sunucuda kaldığı için React paketi küçük kalır ve UI yanıt verir.
5. Görüntüleyiciyi Angular ve Vue’da Yerleştirme – Yeniden Kullanılabilir Bileşen Desenleri
Angular
Angular’da, .NET API’sini (belge aç, küçük resim al) yansıtan bir servis oluşturun. Servis, HttpClient kullanarak arka uç uç noktalarını çağırır ve token’ı bir observable olarak döndürür.
Ardından, başlatıldığında token isteyip sayfa görüntü URL’lerini oluşturup *ngFor ile gösteren bir bileşen oluşturun. Bileşen, React örneğine benzer şekilde açıklama ve arama için Doconut’un JavaScript yardımcı programını çağıran düğmeler sunabilir.
Vue
Vue’da, created yaşam döngüsü kancasını kullanarak token’ı fetch ya da axios ile isteyin. Token ve oluşturulan sayfa URL’lerini bileşenin data nesnesinde saklayın. Sayfaları bir v-for döngüsüyle render edin. Vue’nun reaktivitesi, kullanıcı kaydırdıkça, yakınlaştırdıkça veya Doconut’un JavaScript entegrasyonu aracılığıyla bir açıklama eylemi tetiklediğinde görünümü güncellemeyi kolaylaştırır.
Üç framework de aynı arka uç sözleşmesini paylaşır, böylece aynı ASP.NET Core denetleyicisini değişiklik yapmadan yeniden kullanabilirsiniz.
Sonuç
Tam özellikli bir belge görüntüleyiciyi yerleştirmek artık bir dizi üçüncü‑taraf eklentisi veya maliyetli bulut hizmeti gerektirmiyor. Doconut ile geliştiriciler, PDF, Office ve CAD dosyalarını render eden, açıklama, OCR‑destekli arama ve kontrol edilen yazdırma sağlayan tek bir sunucu‑tarafı kütüphane elde eder—belgeleri güvenli ve ölçeklenebilir tutarken.
.NET, React, Angular veya Vue uygulamanızda belge deneyimini yükseltmeye hazır mısınız? Doconut’u bugün deneyin ve kullanıcılarınızın seveceği, kurumsal düzeyde bir görüntüleyiciyi ne kadar hızlı bir şekilde dağıtabileceğinizi görün.