Cara Membangun Studio Anotasi Dokumen di Browser
Tim yang bekerja dengan kontrak, faktur, atau bukti memerlukan lebih dari sekadar penampil (viewer) sederhana. Mereka membutuhkan cara untuk menyusun halaman dari berbagai sumber tanpa harus mengunggah file sensitif ke server.
Anda dapat membangun studio anotasi dokumen di sisi klien (client-side) menggunakan TypeScript, Vite, dan alat-alat Dynamsoft.
Aplikasi ini memungkinkan Anda untuk:
- Membuka PDF dan gambar.
- Menambahkan file baru ke dokumen yang sudah ada alih-alih menggantinya.
- Menangkap halaman langsung dari pemindai (scanner).
- Menambahkan tanda sensor (redaction) yang dapat dipindahkan dan stempel persetujuan.
- Menghapus halaman yang tidak diinginkan.
- Mengekspor dokumen yang sudah selesai sebagai PDF, PNG, JPEG, atau TIFF.
Stack Teknis:
- Node.js 18+
- Dynamsoft Document Viewer (DDV) v4
- Dynamic Web TWAIN (DWT)
- Vite dan TypeScript
Logika Utama:
Alih-alih mengganti file saat ini, gunakan doc.loadSource(source, index) untuk menambahkan halaman. Ini memungkinkan Anda membuat satu dokumen tunggal dari berbagai gambar dan PDF yang berbeda.
Untuk pemindai, gunakan bridge Dynamic Web TWAIN. Karena browser tidak memiliki API pemindai standar, DWT menyediakan koneksi ke perangkat keras. Anda dapat mengubah gambar hasil pindai menjadi PDF blob dan menambahkannya ke viewer Anda secara instan.
Untuk keamanan, gunakan anotasi sensor (redaction). Anda dapat membuat persegi panjang hitam di atas teks sensitif. Pengguna dapat memindahkan atau mengubah ukuran tanda ini sebelum menerapkannya secara permanen ke dokumen.
Ekspor bersifat fleksibel. Anda dapat memilih berbagai mode PDF:
- Annotation mode: Menjaga tanda tetap dapat diedit.
- Flatten mode: Menyatukan tanda ke dalam halaman.
- Image mode: Mengonversi halaman menjadi gambar.
Pendekatan ini menjaga semua pemrosesan tetap di sisi klien. Data Anda tetap pribadi dan aman.