Geliştiricilerin PDF, Office ve CAD Görüntülemeyi .NET, React, Angular veya Vue Web Uygulamalarına Entegre Etmesiyle Kullanıcı Dostluğunu ve Verimliliği Artırması: 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 sayfaları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 veya harici bir bulut hizmetine güvenmeden. İşte Doconut burada devreye giriyor. Sunucu taraflı bir belge görüntüleyicisi olan Doconut, 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 baskı 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 uçlarına 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 Ayrı Bir Görüntüleyici Kurumsal Web Uygulamaları İçin Önemlidir
“İndir‑ve‑aç”ın gizli maliyeti
Çoğu eski portal, bir paylaşımdaki dosyaya sadece bir bağlantı bırakır. Buna tıklandığında dosya ya indirilir ya da yerel olarak yüklü bir programa yönlendirilir. Uygulamada bu, birkaç soruna yol açar:
- 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 renderleme – 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 sızar, denetim izlerini ve veri kaybı önleme politikalarını kabusa dönüştürür.
- Düşük verimlilik – inceleyenler sadece açıklama, arama veya baskı yapmak için birden fazla araçla uğraşır, onay süreçlerini yavaşlatır.
Geliştiricilerin Gerçekten İhtiyacı Olan Şey
Modern bir çözüm şunları sağlamalıdır:
- 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.
- Ek kütüphaneler eklemeden açıklama, tam metin arama (OCR dahil) ve kontrol edilen baskıyı içer.
- Güvenli bir şekilde ölçeklendir—belgeleri sunucuda işleyin, görüntü döşemeleri olarak akış yapın ve ham dosyaları asla istemciye açığa çıkarmayın.
Doconut tüm bu kriterleri karşılar. Görüntüleyici kütüphanesi .NET sunucusunda çalışır, kaynak belgeleri talep üzerine raster sayfalara dönüştürür ve bu sayfaları desteklenen ön uç entegrasyonları tarafından tüketilen hafif bir HTTP uç noktası aracılığıyla sunar.
2. ASP.NET Core Uygulamasında PDF Dönüşümü İçin Doconut Ara Katmanını Yapılandırma
İlk adım, Doconut ara katmanını kaydetmek ve arka ucun belge döşemeleri, küçük resimler ve açıklama verilerini sunmasını sağlamaktır. Bu, ASP.NET Core istek hattında yapılır ve önbellekleme ve istek bağlamı için yalnızca birkaç hizmet kaydı gerektirir.
Ara katmanı kaydetme
ConfigureServices içinde gerekli hizmetleri (dağıtılmış bellek önbelleği ve HTTP bağlam erişicisi) ekleyin. Ardından, Configure içinde Doconut uç noktasını (genellikle DocImage.axd) Doconut ara katmanına eşleyin. Ara katman seçenekleri, güvenli renderlemeyi zorlamanıza ve iç teşhisleri son kullanıcılardan gizlemenize olanak tanır.
Lisansı başlatma
Doconut, başlangıçta bir lisans dosyası gerektirir. Yaygın yaklaşım, 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 olur.
Bir belge açma ve token alma
Bir kullanıcı belge talep ettiğinde, arka uç Doconut API'si üzerinden dosyayı açar ve şifre koruması, görüntü çözünürlüğü ve zaman aşımı gibi isteğe bağlı parametreler sağlar. Doconut, açılan belgeyi benzersiz şekilde temsil eden kısa bir token (genellikle bir GUID) döndürür. Ön uç bu token'ı her döşeme isteğinde içerir, örneğin /DocImage.axd?token=abcd1234&page=1&zoom=100.
3. JavaScript Çatılar İçin Güvenli Belge‑Akışı API'si Açma
Doconut zaten ara katman aracılığıyla düşük seviyeli bir döşeme işleyicisi sağlasa da, çoğu ekip kimlik doğrulama, günlük kaydı ve isteğe bağlı filigran ekleyen ince bir sarmalayıcı denetleyiciyi tercih eder.
Tipik denetleyici sorumlulukları
- Açma uç noktası – Bir belge tanımlayıcısını kabul eder, fiziksel dosya yolunu çözer, belgeyi açmak için Doconut'u ç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 faydalıdır. Denetleyici, uygun sorgu dizesiyle Doconut döşeme işleyicisine basitçe yönlendirebilir.
Güvenlik hususları
Token'ı kullanıcının oturumunda saklayın veya kısa ömürlü bir JWT talebine gömün. Token tek başına sunucu tarafı önbelleği olmadan orijinal dosyayı alamadığı 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 gibi bir işlevsel bileşen oluşturabilir:
- İstenen belge için token almak amacıyla
/openuç noktasını çağırır. - Her sayfa için Doconut'un döşeme işleyicisine işaret eden görüntü URL'leri dizisi oluşturur (ilk on sayfayla başlayabilir ve gerektiğinde daha fazlasını yükleyebilirsiniz).
- 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ı program aracılığıyla şu komutları verebilirsiniz:
- Bir terimi vurgula – belge genelinde tam metin araması yapar ve eşleşen kelimeleri vurgular.
- Bir açıklama ekle – sayfa numarası, açıklama türü, koordinatlar ve ek verileri içeren bir JSON yükü göndererek belirli bir sayfaya yapışkan not, damga veya çizim ekler.
Ağır renderleme işi sunucuda kaldığı için React paketi küçük kalır ve kullanıcı arayüzü yanıt verir.
5. Görüntüleyiciyi Angular ve Vue'ye Yerleştirme – Yeniden Kullanılabilir Bileşen Kalıpları
Angular
Küçük .NET API'sini (belge açma, küçük resim getirme) yansıtan bir Angular servisi oluşturun. Servis, arka uç uç noktalarını çağırmak için HttpClient kullanı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 veya axios ile isteyen bir bileşen tanımlayın. Token ve oluşturulan sayfa URL'lerini bileşenin veri nesnesinde saklayın. Sayfaları bir v-for döngüsüyle render edin. Vue'nun reaktivitesi, kullanıcı kaydırdığında, yakınlaştırdığında 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, bu yüzden aynı ASP.NET Core denetleyicisini değişiklik yapmadan yeniden kullanabilirsiniz.
Sonuç
Tam özellikli bir belge görüntüleyiciyi yerleştirmek artık üçüncü taraf eklentilerinin bir mozaiği veya maliyetli bulut hizmetleri gerektirmiyor. Doconut ile geliştiriciler, PDF, Office ve CAD dosyalarını render eden, açıklama, OCR destekli arama ve kontrol edilen baskı sağlayan tek bir sunucu‑tarafı kütüphane elde eder—tüm bunlar belgeleri güvenli ve ölçeklenebilir tutarken.
.NET, React, Angular veya Vue uygulamanızda belge deneyimini yükseltmeye hazır mısınız? Bugün Doconut'u deneyin ve kullanıcılarınızın seveceği, kurumsal düzeyde bir görüntüleyiciyi ne kadar hızlı bir şekilde sunabileceğinizi görün.