C
7/10/2026

Cara Menyematkan Penampil Dokumen Tanpa Plugin di ASP.NET

Panduan langkah demi langkah untuk insinyur .NET yang perlu menyematkan penampil dokumen aman tanpa plugin Doconut App ke dalam proyek ASP.NET Core, MVC, atau WebForms.

Ya—Anda dapat menyematkan penampil berkas online aman tanpa plugin ke dalam aplikasi ASP.NET Core, MVC, atau WebForms apa pun dalam beberapa menit saja, dan Doconut App melakukan semua pekerjaan berat.
Perusahaan yang menyediakan kontrak, gambar, atau aset desain memerlukan penampil yang menghormati kebijakan keamanan perusahaan, berfungsi di setiap browser, dan tidak pernah memaksa pengguna menginstal plugin pihak ketiga. Doconut App memberikan tepat itu: penampil berbasis browser yang mendukung PDF, Office, CAD, dan lebih dari 50 format lainnya, dengan enkripsi AES‑256, unggahan hanya melalui SSL, dan UI yang sepenuhnya dapat disesuaikan. Posting ini membimbing Anda melalui seluruh alur kerja—dari mengamankan unggahan berkas hingga merender penampil—sehingga Anda dapat mengirimkan solusi kelas perusahaan yang halus tanpa menulis mesin rendering dari awal.


1. Mengapa keamanan dan rendering tanpa plugin penting untuk aplikasi web .NET

Perusahaan modern memperlakukan setiap dokumen sebagai potensi kebocoran data. Ketika Anda menyematkan penampil yang bergantung pada ActiveX, Flash, atau klien native, Anda mewarisi tiga risiko:

RisikoDampak pada aplikasi .NET AndaBagaimana Doconut App menghilangkannya
Ketergantungan pluginPengguna harus menginstal atau mengaktifkan plugin browser, yang menyebabkan tiket dukungan dan masalah kepatuhan.Doconut berjalan sepenuhnya di HTML5/Canvas, tidak memerlukan zero plugins.
Transmisi tidak terenkripsiBerkas berpindah melalui HTTP atau disimpan dalam teks biasa, melanggar GDPR, HIPAA, atau kebijakan internal.Semua unggahan melewati SSL dan disimpan dengan enkripsi AES‑256.
Siklus hidup tidak terkendaliBerkas dapat tertinggal di server, meningkatkan permukaan pelanggaran.Doconut secara otomatis menghapus berkas setelah dilihat, memastikan jendela retensi yang singkat.

Karena penampil disediakan sebagai komponen JavaScript yang berkomunikasi dengan layanan rendering aman Doconut, Anda menjaga stack .NET tetap bersih—tanpa pustaka native tambahan, tanpa binari pihak ketiga, dan tanpa audit kepatuhan ekstra.


2. Menyiapkan proyek .NET Anda – setup minimal untuk ASP.NET Core, MVC, dan WebForms

Terlepas dari apakah Anda menggunakan ASP.NET Core, MVC 5, atau WebForms, langkah persiapan identik:

  1. Tambahkan bundle skrip Doconut
    Doconut menyajikan skrip penampil ringan di CDN-nya. Tambahkan baris berikut ke halaman layout Anda (misalnya _Layout.cshtml atau Site.Master):

    <script src="https://doconut.app/viewer.min.js"></script>
    
  2. Buat elemen placeholder
    Penampil menyuntikkan kanvas ke dalam <div> yang Anda tunjuk. Contoh untuk Razor:

    <div id="docViewer" style="width:100%; height:800px;"></div>
    

    Untuk WebForms, letakkan <asp:Panel> dengan runat="server" dan beri ID="docViewer".

  3. Referensikan CSS Doconut (opsional)
    Jika Anda menginginkan toolbar dan tema default, sertakan file CSS:

    <link rel="stylesheet" href="https://doconut.app/viewer.min.css" />
    

Itulah semua aset statis yang Anda perlukan. Sisanya dikerjakan di kode sisi‑server Anda (unggahan, enkripsi, pembuatan token) dan skrip inisialisasi sisi‑klien yang sangat kecil.


3. Membuat endpoint unggahan aman – AES‑256, SSL, dan hapus otomatis

Penampil tidak pernah mengakses berkas secara langsung di sistem file Anda. Sebagai gantinya, Anda mengunggah dokumen ke lokasi penyimpanan terenkripsi sementara yang dibaca Doconut saat diminta. Berikut deskripsi tingkat tinggi langkah‑langkah yang diperlukan untuk ASP.NET Core; ide yang sama berlaku untuk MVC dan WebForms.

Alur kerja sisi‑server

  1. Terima berkas yang diunggah – Gunakan IFormFile standar (atau HttpPostedFile di WebForms) untuk menerima dokumen dari klien.
  2. Enkripsi berkas dengan AES‑256 – Sebelum menyimpan aliran, enkripsikan menggunakan pustaka terbukti seperti System.Security.Cryptography.Aes. Simpan blob terenkripsi di lokasi aman (misalnya Azure Blob Storage dengan enkripsi sisi server diaktifkan, atau bucket S3 dengan SSE‑AES256).
  3. Buat URL bertanda tangan berumur pendek – Buat URL yang berlaku beberapa menit (misalnya 5 menit). URL harus HTTPS dan menyertakan token kriptografis yang dapat divalidasi Doconut. Kebanyakan penyedia penyimpanan cloud menawarkan fitur “pre‑signed URL” yang cocok untuk kebutuhan ini.
  4. Kembalikan URL bertanda tangan ke klien – Kirim respons JSON yang berisi URL tersebut. Klien akan menyerahkan URL ini ke penampil Doconut.
  5. Jadwalkan penghapusan otomatis – Setelah URL bertanda tangan kedaluwarsa, pekerjaan latar belakang (Hangfire, Azure Functions, dll.) menghapus blob terenkripsi, menjamin berkas tidak tetap di server.

Equivalen MVC / WebForms

  • MVC – Letakkan logika yang sama di dalam aksi controller biasa dan kembalikan JsonResult.
  • WebForms – Implementasikan handler .ashx atau metode halaman yang mengikuti langkah yang sama: terima Request.Files[0], enkripsi, buat URL bertanda tangan, dan tulis respons JSON.

Satu‑satunya perbedaan adalah sintaks routing; alur kerja keamanan tetap identik.


4. Merender penampil Doconut – dari URL ke kanvas di browser

Setelah klien menerima URL bertanda tangan, penampil dapat diluncurkan dengan satu panggilan JavaScript. SDK Doconut secara otomatis menangani streaming, rendering, dan interaksi UI.

<script>
    // Anggap `response.viewerUrl` berisi URL bertanda tangan yang dikembalikan dari endpoint unggahan
    function launchViewer(viewerUrl) {
        // Inisialisasi penampil Doconut. Objek global yang disediakan skrip adalah `DoconutViewer`.
        DoconutViewer.init({
            containerId: "docViewer",   // <div> yang kita tempatkan sebelumnya
            fileUrl: viewerUrl,          // URL HTTPS bertanda tangan ke berkas terenkripsi
            toolbar: true,               // Tampilkan toolbar bawaan
            theme: "light"              // Tema visual opsional
        });
    }

    // Contoh: setelah unggahan berhasil
    fetch("/api/document/upload", {
        method: "POST",
        body: myFormData,
        credentials: "include"
    })
    .then(r => r.json())
    .then(data => launchViewer(data.viewerUrl));
</script>

Mengapa ini bekerja untuk setiap varian .NET

  • ASP.NET Core Razor – Skrip berada di tampilan yang sama dengan formulir unggahan, sehingga alurnya mulus.
  • MVC – Gunakan @section Scripts untuk menyuntikkan potongan kode yang sama; controller mengembalikan JSON yang dapat dikonsumsi $.ajax MVC.
  • WebForms – Daftarkan skrip dengan ClientScript.RegisterStartupScript setelah unggahan selesai, lalu panggil launchViewer dengan cara yang sama.

Karena Doconut men-stream dokumen langsung dari URL bertanda tangan, server tidak lagi menyentuh berkas setelah langkah unggahan. Penampil merender PDF, file Word, gambar CAD, dan semua format lain yang tercantum dalam fakta produk—tanpa konversi sisi server tambahan.


5. Menyesuaikan penampil agar cocok dengan merek Anda – menyempurnakan penampil berkas online

Perusahaan sering membutuhkan penampil yang tampak seperti bagian native portal mereka. UI sepenuhnya dapat disesuaikan Doconut App memungkinkan Anda:

KustomisasiCara menerapkannya di .NET
Tata letak toolbarBerikan toolbar: false dan bangun tombol Anda sendiri yang memanggil API JavaScript penampil (mis., zoomIn(), print()).
Skema warnaSetel theme: "dark" atau sediakan file CSS khusus yang menimpa kelas default.
Bahasa & aksesibilitasDoconut menghormati atribut lang pada container; Anda juga dapat menyuntikkan label ARIA melalui opsi accessibility.
Hook acaraCallback seperti onPageChange, onError, dan onDownload memungkinkan Anda mencatat metrik penggunaan ke dalam pipeline telemetri yang sudah ada.

Semua hook ini dikonfigurasi dalam objek JavaScript yang sama seperti pada bagian sebelumnya. Karena penampil berada sepenuhnya di klien, tidak ada beban server tambahan—backend .NET Anda tetap fokus pada autentikasi, enkripsi, dan logika bisnis.


6. Kinerja dan skalabilitas – menjaga pengalaman tetap responsif

Menyematkan penampil di portal dengan lalu lintas tinggi menimbulkan dua kekhawatiran praktis: waktu muat dan rendering bersamaan. Doconut App menangani keduanya secara default, namun Anda dapat memperkuat batas kinerja dengan beberapa trik khusus .NET.

KekhawatiranKeunggulan bawaan DoconutTips tambahan .NET
Unduhan awalSkrip penampil hanya ~150 KB, ter‑gzip.Aktifkan kompresi file statis (app.UseResponseCompression()) dan caching (Cache‑Control: public, max‑age=31536000).
Streaming berkasDoconut hanya men-stream halaman yang dibutuhkan, memakai permintaan rentang HTTP.Simpan blob terenkripsi di CDN regional (Azure Front Door, Amazon CloudFront) untuk mengurangi latensi.
Pengguna bersamaanRendering terjadi di klien; server hanya melayani berkas terenkripsi sekali per tampilan.Batasi endpoint unggahan dengan IApplicationRateLimiter untuk melindungi dari lonjakan.
Jejak memoriTidak ada pustaka konversi PDF sisi server, sehingga proses ASP.NET tetap ringan.Jalankan layanan unggahan dalam microservice terpisah jika Anda sudah memiliki antrian pekerjaan latar belakang yang berat.

Dengan mengikuti panduan ini, Anda dapat mendukung ribuan penampil bersamaan tanpa harus menskalakan lapisan web .NET melebihi apa yang sudah Anda miliki.


Kesimpulan Utama

  • Doconut App menyediakan penampil aman, tanpa plugin, 100 % yang berfungsi dengan ASP.NET Core, MVC, dan WebForms.
  • Unggahan bersifat hanya SSL, disimpan dengan enkripsi AES‑256, dan otomatis dihapus setelah URL bertanda tangan kedaluwarsa.
  • Integrasi memerlukan hanya skrip CDN, elemen <div> placeholder, dan endpoint sisi‑server kecil yang mengembalikan URL bertanda tangan.
  • Penampil mendukung PDF, Office, CAD, dan lebih dari 50 format gambar—tanpa konversi sisi server.
  • UI dapat sepenuhnya disesuaikan agar selaras dengan branding perusahaan, dan penampil menawarkan zoom, pengukuran, serta alat lapisan bawaan untuk berkas CAD.
  • Kinerja ditangani di sisi klien; pengembang .NET hanya perlu memastikan kompresi file statis dan, bila perlu, caching CDN.
  • Seluruh alur kerja—dari unggahan aman hingga rendering di browser—terpadu bersih dalam pipeline autentikasi dan otorisasi .NET yang sudah ada.

Pertanyaan Umum

T1: Apakah saya harus menginstal paket NuGet apa pun untuk menggunakan Doconut?
J: Tidak. Penampil disajikan sebagai bundel JavaScript sisi‑klien dari CDN Doconut. Server Anda hanya memerlukan middleware ASP.NET Core standar untuk unggahan file dan enkripsi, yang kemungkinan sudah Anda miliki.

T2: Bagaimana Doconut memastikan berkas dihapus setelah dilihat?
J: Doconut menghasilkan URL bertanda tangan berumur pendek yang kedaluwarsa setelah periode yang dapat dikonfigurasi (biasanya lima menit). Setelah URL kedaluwarsa, Anda (atau pekerjaan pembersihan latar belakang) menghapus blob terenkripsi. Ini menjamin dokumen tidak disimpan lebih lama dari yang diperlukan, memenuhi kebijakan retensi data yang ketat.

T3: Bisakah saya mencetak atau mengekspor dokumen melalui penampil?
J: Ya. Toolbar bawaan Doconut mencakup opsi cetak dan ekspor yang mempertahankan kualitas serta tata letak asli berkas sumber.


Siap menyematkan penampil dokumen aman tanpa plugin ke dalam aplikasi .NET Anda? Mulailah dengan Doconut App hari ini dan sajikan PDF, Office, CAD, serta puluhan format lainnya secara aman dan instan.