Cara Pengembang Menyematkan Penampilan PDF, Office, dan CAD ke dalam Aplikasi Web .NET, React, Angular, atau Vue untuk Meningkatkan Keterpakaian dan Efisiensi: Langkah demi Langkah
Jika Anda mencoba mengubah aplikasi .NET yang penuh dokumen menjadi sesuatu yang benar‑benarnya 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 backend ASP.NET Core, hingga menyematkan penampil di frontend 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, dan kemudian 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 perusahaan, membuat jejak audit dan kebijakan pencegahan kehilangan data menjadi mimpi buruk.
- Produktivitas rendah – peninjau harus menggunakan banyak alat hanya untuk memberi anotasi, mencari, atau mencetak, memperlambat persetujuan.
Apa yang sebenarnya dibutuhkan pengembang
Sebuah solusi modern harus:
- Render setiap format yang didukung di browser (PDF, DOCX, XLSX, PPTX, DWG, DXF, …).
- Menyediakan API yang bersih untuk backend .NET dan frontend React, Angular, atau Vue.
- Menyertakan anotasi, pencarian teks penuh (termasuk OCR) dan pencetakan terkontrol tanpa menambahkan pustaka tambahan.
- Skala dengan aman—proses dokumen di server, streaming 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 frontend yang didukung.
2. Mengonfigurasi Middleware Doconut untuk Konversi PDF dalam Aplikasi ASP.NET Core
Langkah pertama adalah mendaftarkan middleware Doconut sehingga backend 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) di ConfigureServices. Kemudian, di 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 file 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 dokumen, backend membuka file melalui API Doconut, menyertakan parameter opsional seperti proteksi kata sandi, resolusi gambar, dan batas waktu. Doconut mengembalikan token singkat (biasanya GUID) yang secara unik mewakili dokumen yang dibuka. Frontend menyertakan token ini dalam setiap permintaan ubin, misalnya /DocImage.axd?token=abcd1234&page=1&zoom=100.
3. Mengekspos API Aliran Dokumen yang Aman untuk Kerangka Kerja JavaScript
Meskipun Doconut sudah menyediakan penangan ubin tingkat‑rendah melalui middleware, kebanyakan tim lebih suka controller pembungkus tipis yang menambahkan autentikasi, pencatatan, dan watermark opsional.
Tanggung jawab controller 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. Controller dapat langsung mengarahkan ke penangan ubin Doconut dengan string kueri 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 dalam 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‑halaman sebagai elemen
<img>, menangani peristiwa scroll atau zoom dengan memperbarui parameter URL.
Interaksi dengan titik integrasi JavaScript Doconut
Doconut menyuntikkan helper JavaScript ringan ke dalam halaman. Melalui helper ini Anda dapat mengirim perintah seperti:
- Sorot sebuah istilah – meminta pencarian teks penuh di seluruh dokumen dan menyorot kata‑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 dalam 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 backend 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 helper JavaScript Doconut untuk anotasi dan pencarian, serupa 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‑halaman dengan loop v-for. Reaktivitas Vue memudahkan memperbarui tampilan ketika pengguna menggulir, memperbesar, atau memicu aksi anotasi melalui integrasi JavaScript Doconut.
Ketiga kerangka kerja berbagi kontrak backend yang sama, sehingga Anda dapat menggunakan kembali controller 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 dan disukai pengguna.