چگونه یک استودیوی یادداشتگذاری اسناد در مرورگر بسازیم
تیمهایی که با قراردادها، فاکتورها یا مدارک اثبات کار میکنند، به چیزی فراتر از یک نمایشدهنده (viewer) ساده نیاز دارند. آنها به روشی نیاز دارند تا صفحات را از منابع مختلف بدون آپلود کردن فایلهای حساس در یک سرور، با هم ترکیب کنند.
شما میتوانید با استفاده از TypeScript، Vite و ابزارهای Dynamsoft، یک استودیوی یادداشتگذاری اسناد در سمت کلاینت (client-side) بسازید.
این اپلیکیشن به شما اجازه میدهد:
- فایلهای PDF و تصاویر را باز کنید.
- به جای جایگزینی یک سند موجود، فایلهای جدید را به آن اضافه کنید.
- صفحات را مستقیماً از طریق اسکنر دریافت کنید.
- نشانههای پوشانش (redaction) متحرک و مهر تأیید اضافه کنید.
- صفحات ناخواسته را حذف کنید.
- اسناد نهایی را به صورت PDF، PNG، JPEG یا TIFF خروجی بگیرید.
پشته تکنولوژی (Technical Stack):
- Node.js 18+
- Dynamsoft Document Viewer (DDV) v4
- Dynamic Web TWAIN (DWT)
- Vite and TypeScript
منطق اصلی:
به جای جایگزین کردن فایل فعلی، از doc.loadSource(source, index) برای افزودن صفحات استفاده کنید. این کار به شما اجازه میدهد از چندین تصویر و PDF مختلف، یک سند واحد ایجاد کنید.
برای اسکنرها، از پل (bridge) Dynamic Web TWAIN استفاده کنید. از آنجایی که مرورگرها فاقد یک API استاندارد برای اسکنر هستند، DWT اتصال به سختافزار را فراهم میکند. شما میتوانید تصاویر اسکن شده را به یک PDF blob تبدیل کرده و بلافاصله آنها را به نمایشدهنده خود اضافه کنید.
برای امنیت، از یادداشتهای پوشانش (redaction annotations) استفاده کنید. میتوانید یک مستطیل سیاه روی متنهای حساس ایجاد کنید. کاربران میتوانند قبل از اعمال دائمی این علامت روی سند، آن را جابهجا کرده یا تغییر اندازه دهند.
خروجی گرفتن منعطف است. شما میتوانید حالتهای مختلف PDF را انتخاب کنید:
- حالت یادداشتگذاری (Annotation mode): نشانهها را قابل ویرایش نگه میدارد.
- حالت تختسازی (Flatten mode): نشانهها را روی صفحه تثبیت (burn) میکند.
- حالت تصویر (Image mode): صفحات را به تصویر تبدیل میکند.
این رویکرد تمام پردازشها را در سمت کلاینت نگه میدارد. دادههای شما خصوصی و امن باقی میماند.