چگونه توسعهدهندگان نمایش 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 انجام میشود و فقط به چند ثبت سرویس برای کشینگ و دسترسی به زمینهٔ درخواست نیاز دارد.
ثبت میدلور
در ConfigureServices سرویسهای مورد نیاز (کش حافظهٔ توزیعشده و IHttpContextAccessor) را اضافه کنید. سپس در 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 کوچک میماند و UI پاسخگو میماند.
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 را امتحان کنید و ببینید چقدر سریع میتوانید یک نمایشگر حرفهای و سطح سازمانی ارائه دهید که کاربران شما آن را دوست خواهند داشت.