چگونه توسعهدهندگان نمایش PDF، Office و CAD را در برنامههای وب .NET، React، Angular یا Vue ادغام میکنند تا کاربرپسندی و کارایی را افزایش دهند: گام به گام
اگر میخواهید یک برنامه .NET سنگین‑اسنادی را به چیزی تبدیل کنید که کاربران واقعاً از آن لذت ببرند، به یک نمایشگر نیاز دارید که بتواند PDFها، فایلهای Word، شیتهای Excel، اسلایدهای PowerPoint و نقشههای CAD را مدیریت کند—همه اینها بدون اینکه کاربران مجبور به دانلود برنامهٔ دسکتاپ شوند یا به سرویس ابری خارجی وابسته باشند. اینجاست که Doconut وارد عمل میشود. این یک نمایشگر اسناد سمت‑سرور است که صفحات رندر شده را به مرورگرهای وب پشتیبانیشده استریم میکند و بهصورت پیشفرض حاشیهنویسی بومی، جستجوی متن کامل (شامل OCR) و چاپ کنترلشده را فراهم میسازد. در این راهنما کل جریان کار را قدم به قدم بررسی میکنیم: از پیکربندی موتور تبدیل Doconut در بک‑اند ASP.NET Core تا ادغام نمایشگر در فرانت‑اندهای React، Angular و Vue. آمادهاید تا تجربهٔ اسنادی روان و کارآمد را به کاربران تحویل دهید؟ بزنید بریم.
1. چرا یک نمایشگر اختصاصی برای برنامههای وب سازمانی مهم است
هزینهٔ پنهان «دانلود‑و‑باز کردن»
بخشهای قدیمی معمولاً فقط یک لینک به فایل روی یک اشتراک میگذارند. کلیک روی آن یا فایل را دانلود میکند یا به برنامهای که بهصورت محلی نصب شده است میسپارد. در عمل این کار چند مشکل ایجاد میکند:
- از دست رفتن زمینه – کاربران از پورتال خارج میشوند، سند را در پنجرهای جداگانه باز میکنند و سپس باید به یاد داشته باشند کجا بودند.
- رندرینگ ناسازگار – نمایشگرهای Word، Excel و CAD نصبشده بر روی دستگاه میتوانند فایلها را بهصورت متفاوتی تفسیر کنند و باعث بروز اشکال در چینش شوند که میتواند تصمیمات قانونی یا مهندسی را تحت تأثیر قرار دهد.
- ریسک امنیتی – فایلها خارج از مرزهای شرکت میلغزند و ردیابیهای حسابرسی و سیاستهای جلوگیری از نشت دادهها را به کابوس تبدیل میکند.
- کاهش بهرهوری – مرورگران برای حاشیهنویسی، جستجو یا چاپ مجبورند از ابزارهای متعدد استفاده کنند که روند تأییدها را کند میکند.
آنچه توسعهدهندگان واقعاً نیاز دارند
یک راهحل مدرن باید:
- هر فرمت پشتیبانیشده را در مرورگر رندر کند (PDF، DOCX، XLSX، PPTX، DWG، DXF، …).
- یک API تمیز برای بک‑اندهای .NET و فرانت‑اندهای React، Angular یا Vue ارائه دهد.
- حاشیهنویسی، جستجوی متن کامل (شامل OCR) و چاپ کنترلشده را بدون افزودن کتابخانههای اضافی فراهم کند.
- بهصورت ایمن مقیاسپذیر باشد — پردازش اسناد روی سرور، استریم آنها بهصورت کاشیهای تصویری و هرگز در معرض دسترسی مستقیم مشتریان قرار نگیرد.
Doconut تمام این موارد را پوشش میدهد. کتابخانهٔ نمایشگر آن روی سرور .NET اجرا میشود، اسناد منبع را به صفحات رستر در زمان نیاز تبدیل میکند و این صفحات را از طریق یک نقطهٔ انتهایی HTTP سبک که توسط ادغامهای فرانت‑اند پشتیبانی میشود، سرو میکند.
2. پیکربندی میدلور Doconut برای تبدیل PDF در برنامهٔ ASP.NET Core
اولین گام ثبت میدلور Doconut است تا بک‑اند بتواند کاشیهای سند، تصویرهای کوچک و دادههای حاشیهنویسی را سرو کند. این کار در خط لولهٔ درخواست ASP.NET Core انجام میشود و تنها به چند ثبت سرویس برای کش و زمینهٔ درخواست نیاز دارد.
ثبت میدلور
سرویسهای مورد نیاز (کش حافظهٔ توزیعشده و دسترسی به زمینهٔ HTTP) را در ConfigureServices اضافه کنید. سپس در Configure، نقطهٔ انتهایی Doconut (معمولاً DocImage.axd) را به میدلور Doconut نگاشت کنید. گزینههای میدلور به شما اجازه میدهند رندرینگ ایمن را اعمال کنید و عیبیابی داخلی را از کاربران نهایی مخفی کنید.
مقداردهی اولیهٔ لایسنس
Doconut برای شروع به یک فایل لایسنس نیاز دارد. روش معمول این است که لایسنس را بهعنوان منبعی تعبیه کنید و هنگام راهاندازی برنامه آن را بهصورت استریم بارگذاری کنید. پس از ارائهٔ استریم لایسنس به نمونهٔ نمایشگر Doconut، SDK بهطور کامل فعال میشود و آمادهٔ پردازش اسناد میگردد.
باز کردن سند و دریافت توکن
زمانی که کاربر درخواستی برای یک سند میفرستد، بک‑اند فایل را از طریق API Doconut باز میکند و پارامترهای اختیاری مانند حفاظت با رمز عبور، وضوح تصویر و زمانسنجی را میفرستد. Doconut یک توکن کوتاه (معمولاً یک GUID) برمیگرداند که بهصورت یکتا سند باز شده را نمایندگی میکند. فرانت‑اند این توکن را در هر درخواست کاشی، مثلاً /DocImage.axd?token=abcd1234&page=1&zoom=100، میفرستد.
3. ارائهٔ API امن برای استریم سند به فریمورکهای JavaScript
در حالی که Doconut بهصورت پیشفرض یک هندلر کاشی سطح‑پایین از طریق میدلور ارائه میدهد، اکثر تیمها ترجیح میدهند یک کنترلر نازک بنویسند که احراز هویت، لاگگیری و واترمارکگذاری اختیاری را اضافه کند.
وظایف معمول کنترلر
- نقطهٔ انتهایی باز کردن – شناسهٔ سند را میگیرد، مسیر فیزیکی فایل را حل میکند، به Doconut میگوید سند را باز کند و توکن تولیدشده را برمیگرداند.
- نقطهٔ انتهایی تصویر کوچک – یک PNG کوچک برای صفحهٔ موردنظر برمیگرداند؛ برای نوارهای ناوبری مفید است. کنترلر میتواند به سادگی به هندلر کاشی Doconut با رشتهٔ پرسوجوی مناسب ریدایرکت کند.
ملاحظات امنیتی
توکن را در نشست کاربر ذخیره کنید یا در یک ادعای JWT کوتاهمدت بگذارید. چون توکن بهتنهایی نمیتواند فایل اصلی را بدون کش سمت‑سرور بازیابی کند، سند محافظتشده میماند. همان API REST برای الگوهای ادغام React، Angular و Vue که در این راهنما توضیح داده شدهاند، قابل استفاده است.
4. ادغام نمایشگر در برنامهٔ React
توسعهدهندگان React میتوانند یک کامپوننت تابعی بسازند که:
- نقطهٔ انتهایی
/openرا فراخوانی میکند تا توکن سند درخواستی را دریافت کند. - آرایهای از URLهای تصویر که به هندلر کاشی Doconut برای هر صفحه اشاره دارند، میسازد (میتوانید با اولین ده صفحه شروع کنید و بهصورت تقاضا صفحات بیشتری بارگذاری کنید).
- صفحات را بهصورت عناصر
<img>رندر میکند و با بهروزرسانی پارامترهای URL به رویدادهای اسکرول یا زوم واکنش نشان میدهد.
تعامل با نقاط ادغام JavaScript Doconut
Doconut یک کمککنندهٔ JavaScript سبک به صفحه اضافه میکند. از طریق این کمککننده میتوانید دستورات زیر را اجرا کنید:
- هایلایت یک عبارت – جستجوی متن کامل در سراسر سند را درخواست کنید و کلمات منطبق را برجسته کنید.
- افزودن حاشیهنویسی – یک یادداشت چسبی، مهر یا رسم را بر روی صفحهٔ خاصی قرار دهید؛ برای این کار یک payload JSON شامل شماره صفحه، نوع حاشیهنویسی، مختصات و هر دادهٔ اضافی دیگری ارسال میشود.
چون کار رندرینگ سنگین روی سرور انجام میشود، بستهٔ React کوچک میماند و رابط کاربری پاسخگو میماند.
5. ادغام نمایشگر در Angular و Vue – الگوهای کامپوننت قابل استفاده مجدد
Angular
یک سرویس Angular ایجاد کنید که API کوچک .NET (باز کردن سند، دریافت تصویر کوچک) را بازتاب دهد. سرویس از HttpClient برای فراخوانی نقطههای انتهایی بک‑اند استفاده میکند و توکن را بهصورت Observable برمیگرداند.
سپس یک کامپوننت بسازید که در زمان مقداردهی اولیه توکن را درخواست میکند، URLهای تصویر صفحه را میسازد و با *ngFor آنها را نمایش میدهد. این کامپوننت میتواند دکمههایی داشته باشد که برای حاشیهنویسی و جستجو از کمککنندهٔ JavaScript Doconut استفاده میکنند، مشابه مثال React.
Vue
در Vue یک کامپوننت تعریف کنید که در هوک created توکن را از طریق fetch یا axios درخواست میکند. توکن و URLهای تولیدشدهٔ صفحات را در شیء data کامپوننت ذخیره کنید. صفحات را با یک حلقه v-for رندر کنید. واکنشپذیری Vue باعث میشود بهراحتی هنگام اسکرول، زوم یا فراخوانی عمل حاشیهنویسی از طریق ادغام JavaScript Doconut، نما بهروز شود.
هر سه فریمورک همان قرارداد بک‑اند را بهکار میبرند، بنابراین میتوانید همان کنترلر ASP.NET Core را بدون تغییر استفاده کنید.
نتیجهگیری
ادغام یک نمایشگر اسناد کامل دیگر نیازی به مجموعهای از پلاگینهای شخص ثالث یا سرویسهای ابری گرانقیمت ندارد. با Doconut، توسعهدهندگان یک کتابخانهٔ سمت‑سرور دریافت میکنند که PDF، Office و فایلهای CAD را رندر میکند، حاشیهنویسی، جستجوی مبتنی بر OCR و چاپ کنترلشده را فراهم میسازد — همه اینها در حالی که اسناد را ایمن و مقیاسپذیر نگه میدارد.
آمادهاید تا تجربهٔ اسنادی را در برنامهٔ .NET، React، Angular یا Vue خود ارتقا دهید؟ امروز Doconut را امتحان کنید و ببینید چقدر سریع میتوانید یک نمایشگر سازمانیدرجهٔ بالا که کاربران دوست دارند، تحویل دهید.