Bagaimana Pengembang Menyematkan Tampilan PDF, Office, dan CAD ke dalam Aplikasi Web .NET, React, Angular, atau Vue untuk Meningkatkan Kegunaan dan Efisiensi: Langkah demi Langkah
Jika Anda berusaha mengubah aplikasi .NET yang penuh dokumen menjadi sesuatu yang benar‑benar dinikmati pengguna, Anda memerlukan penampil yang dapat menangani PDF, file Word, lembar Excel, deck PowerPoint dan gambar CAD—semua tanpa memaksa pengguna mengunduh aplikasi desktop atau bergantung pada layanan cloud eksternal. Di sinilah Doconut berperan. Ini adalah penampil dokumen sisi‑server yang menyiarkan halaman yang dirender ke peramban web yang didukung dan menyediakan anotasi native, pencarian teks penuh (termasuk OCR) serta pencetakan terkontrol langsung dari kotak. Dalam panduan ini kami akan menelusuri seluruh alur kerja: mulai dari mengonfigurasi mesin konversi Doconut dalam back‑end ASP.NET Core, hingga menyematkan penampil di front‑end React, Angular, dan Vue. Siap mengirimkan pengalaman dokumen yang mulus dan efisien? Mari kita mulai.
1. Mengapa Penampil Khusus Penting untuk Aplikasi Web Perusahaan
Biaya tersembunyi dari “unduh‑dan‑buka”
Sebagian besar portal warisan hanya menaruh tautan ke file di sebuah share. Mengkliknya akan mengunduh file atau menyerahkannya ke program yang terpasang secara lokal. Pada praktiknya hal ini menimbulkan beberapa masalah:
- Kehilangan konteks – pengguna meninggalkan portal, membuka dokumen di jendela terpisah, lalu harus mengingat di mana mereka berada.
- Rendering tidak konsisten – penampil Word, Excel, dan CAD yang terpasang secara lokal dapat menafsirkan file secara berbeda, menyebabkan gangguan tata letak yang dapat memengaruhi keputusan hukum atau teknik.
- Risiko keamanan – file keluar dari perimeter korporat, menjadikan jejak audit dan kebijakan pencegahan kehilangan data menjadi mimpi buruk.
- Produktivitas rendah – peninjau harus berganti‑ganti alat hanya untuk memberi anotasi, mencari, atau mencetak, memperlambat proses persetujuan.
Apa yang sebenarnya dibutuhkan pengembang
Solusi modern harus:
- Merender setiap format yang didukung di peramban (PDF, DOCX, XLSX, PPTX, DWG, DXF, …).
- Menyediakan API yang bersih untuk back‑end .NET serta front‑end React, Angular, atau Vue.
- Menyertakan anotasi, pencarian teks penuh (OCR termasuk) dan pencetakan terkontrol tanpa harus menambahkan pustaka tambahan.
- Skala dengan aman—memproses dokumen di server, menyiarkannya sebagai ubin gambar, dan tidak pernah mengekspos file mentah ke klien.
Doconut memenuhi semua kriteria tersebut. Perpustakaan penampilnya berjalan di server .NET, mengonversi dokumen sumber menjadi halaman raster sesuai permintaan, dan menyajikan halaman‑halaman tersebut melalui endpoint HTTP ringan yang dikonsumsi oleh integrasi front‑end yang didukung.
2. Mengonfigurasi Middleware Doconut untuk Konversi PDF dalam Aplikasi ASP.NET Core
Langkah pertama adalah mendaftarkan middleware Doconut sehingga back‑end dapat menyajikan ubin dokumen, thumbnail, dan data anotasi. Hal ini dilakukan dalam pipeline permintaan ASP.NET Core dan hanya memerlukan beberapa pendaftaran layanan untuk caching dan konteks permintaan.
Mendaftarkan middleware
Tambahkan layanan yang diperlukan (distributed memory cache dan HTTP context accessor) dalam ConfigureServices. Kemudian, dalam Configure, petakan endpoint Doconut (biasanya DocImage.axd) ke middleware Doconut. Opsi middleware memungkinkan Anda menegakkan rendering yang aman dan menyembunyikan diagnostik internal dari pengguna akhir.
Menginisialisasi lisensi
Doconut memerlukan berkas lisensi saat start‑up. Pendekatan umum adalah menyematkan lisensi sebagai sumber daya dan memuatnya sebagai stream ketika aplikasi dimulai. Setelah stream lisensi diberikan ke instance penampil Doconut, SDK sepenuhnya diaktifkan dan siap memproses dokumen.
Membuka dokumen dan memperoleh token
Ketika pengguna meminta sebuah dokumen, back‑end membuka file melalui API Doconut, menyertakan parameter opsional seperti perlindungan kata sandi, resolusi gambar, dan batas waktu. Doconut mengembalikan token singkat (biasanya GUID) yang secara unik mewakili dokumen yang dibuka. Front‑end menyertakan token ini dalam setiap permintaan ubin, misalnya /DocImage.axd?token=abcd1234&page=1&zoom=100.
3. Menyediakan API Aliran Dokumen yang Aman untuk Kerangka JavaScript
Meskipun Doconut sudah menyediakan penangan ubin tingkat rendah melalui middleware, kebanyakan tim lebih suka kontroler pembungkus tipis yang menambahkan otentikasi, pencatatan, dan watermark opsional.
Tanggung jawab kontroler tipikal
- Endpoint buka – Menerima pengidentifikasi dokumen, menentukan jalur file fisik, memanggil Doconut untuk membuka dokumen, dan mengembalikan token yang dihasilkan.
- Endpoint thumbnail – Mengembalikan PNG kecil untuk halaman tertentu, berguna untuk strip navigasi. Kontroler dapat cukup mengarahkan ulang ke penangan ubin Doconut dengan query string yang sesuai.
Pertimbangan keamanan
Simpan token dalam sesi pengguna atau sematkan dalam klaim JWT yang berumur pendek. Karena token saja tidak dapat mengambil file asli tanpa cache sisi‑server, dokumen tetap terlindungi. API REST yang sama mendukung pola integrasi React, Angular, dan Vue yang dijelaskan dalam panduan ini.
4. Menyematkan Penampil di Aplikasi React
Pengembang React dapat membuat komponen fungsional yang:
- Memanggil endpoint
/openuntuk mengambil token bagi dokumen yang diminta. - Membuat array URL gambar yang mengarah ke penangan ubin Doconut untuk setiap halaman (Anda dapat memulai dengan sepuluh halaman pertama dan memuat lebih banyak sesuai permintaan).
- Merender halaman sebagai elemen
<img>, menangani peristiwa scroll atau zoom dengan memperbarui parameter URL.
Interaksi dengan titik integrasi JavaScript Doconut
Doconut menyuntikkan pembantu JavaScript ringan ke dalam halaman. Melalui pembantu ini Anda dapat mengirim perintah seperti:
- Sorot istilah – melakukan pencarian teks penuh di seluruh dokumen dan menyorot kata yang cocok.
- Tambahkan anotasi – menempatkan catatan tempel, stempel, atau gambar pada halaman tertentu dengan mengirim payload JSON yang mencakup nomor halaman, tipe anotasi, koordinat, dan data tambahan apa pun.
Karena pekerjaan rendering berat tetap berada di server, bundle React tetap kecil dan UI tetap responsif.
5. Menyematkan Penampil di Angular dan Vue – Pola Komponen yang Dapat Digunakan Kembali
Angular
Buat layanan Angular yang meniru API .NET kecil (buka dokumen, ambil thumbnail). Layanan tersebut menggunakan HttpClient untuk memanggil endpoint back‑end dan mengembalikan token sebagai observable.
Kemudian bangun komponen yang, pada inisialisasi, meminta token, menyusun URL gambar halaman, dan menampilkannya dengan *ngFor. Komponen dapat menampilkan tombol yang memanggil pembantu JavaScript Doconut untuk anotasi dan pencarian, mirip dengan contoh React.
Vue
Di Vue, definisikan komponen yang menggunakan hook siklus hidup created untuk meminta token via fetch atau axios. Simpan token dan URL halaman yang dihasilkan dalam objek data komponen. Render halaman dengan loop v-for. Reaktivitas Vue memudahkan pembaruan tampilan ketika pengguna menggulir, memperbesar, atau memicu aksi anotasi melalui integrasi JavaScript Doconut.
Ketiga kerangka kerja berbagi kontrak back‑end yang sama, sehingga Anda dapat menggunakan kembali kontroler ASP.NET Core yang sama tanpa modifikasi.
Kesimpulan
Menyematkan penampil dokumen berfitur lengkap tidak lagi memerlukan mozaik plugin pihak ketiga atau layanan cloud yang mahal. Dengan Doconut, pengembang mendapatkan satu perpustakaan sisi‑server yang merender file PDF, Office, dan CAD, menyediakan anotasi, pencarian berbasis OCR, serta pencetakan terkontrol—semua sambil menjaga dokumen tetap aman dan dapat diskalakan.
Siap meningkatkan pengalaman dokumen di aplikasi .NET, React, Angular, atau Vue Anda? Coba Doconut hari ini dan lihat seberapa cepat Anda dapat mengirimkan penampil kelas perusahaan yang halus, yang akan disukai pengguna Anda.