آموزش ساخت Storyboard از صفحه‌های PDF با JavaScript

چرا مهم است

اگر با PDF در مرورگر کار می‌کنی، این پروژه تفاوت نمایش سند ورودی و ساخت سند خروجی را نشان می‌دهد. همچنین می‌بینی انتخاب صفحه، توضیح‌ها و تنظیمات چیدمان چگونه در یک ابزار کنار هم قرار می‌گیرند.

قبل از خواندن، این‌ها را بدان۳ مفهوم
Canvas

عنصری در HTML که می‌توان با JavaScript تصویر و محتوای گرافیکی را روی آن رسم کرد.

در حال نگارش

OCR

فرایند تشخیص متن در تصویر، مانند صفحه اسکن‌شده، و تبدیل آن به متن قابل پردازش.

در حال نگارش

Vector Content

محتوای گرافیکی مبتنی بر توصیف شکل‌ها و مسیرها، نه مجموعه‌ای ثابت از pixel‌ها؛ متن و خط‌ها می‌توانند هنگام بزرگ‌نمایی کیفیت خود را حفظ کنند.

در حال نگارش

مرور یک PDF طولانی، وقتی هدف فهم ترتیب کلی اسلایدها یا صحنه‌هاست، می‌تواند زمان‌بر باشد. این آموزش ساخت یک ابزار تحت مرورگر را معرفی می‌کند که صفحه‌های انتخابی PDF را در برگه‌های Storyboard کنار هم قرار می‌دهد. هر بخش می‌تواند پیش‌نمایش صفحه، شماره یا برچسب و توضیح کوتاه داشته باشد. این ابزار صحنه یا تصویر تازه‌ای نمی‌سازد؛ محتوای موجود را دوباره می‌چیند.

کاربر فایل را از دستگاه انتخاب می‌کند یا به ناحیه بارگذاری می‌کشد. پردازش PDF به‌صورت محلی در مرورگر انجام می‌شود و فایل به server سایت فرستاده نمی‌شود. سپس می‌توان صفحه‌های موردنظر و ترتیب آن‌ها را تعیین کرد، توضیح نوشت و چیدمان برگه را تغییر داد. JavaScript موقعیت و ابعاد هر بخش را محاسبه می‌کند و پیش‌نمایش با تنظیمات انتخابی به‌روز می‌شود.

سه چیدمان معرفی شده است: Grid با ردیف و ستون، بخش‌هایی با فضای یادداشت و حالت Film strip. اندازه و جهت کاغذ، تعداد ردیف و ستون، برچسب‌ها، رنگ‌ها، font توضیح، اندازه متن، فاصله‌ها و قاب هر بخش قابل تنظیم‌اند. توضیح‌ها را می‌توان دستی نوشت یا بخش‌های خالی را با متن استخراج‌شده از PDF پر کرد. برای خواندن متن صفحه‌های اسکن‌شده نیز استفاده اختیاری از OCR با Tesseract.js مطرح شده است.

دو ابزار اصلی PDF وظیفه یکسانی ندارند. PDF.js سند ورودی را باز می‌کند، ابعاد صفحه‌ها را می‌گیرد و محتوای آن‌ها را برای پیش‌نمایش روی Canvas نمایش می‌دهد. PDF-lib مسئول ساخت PDF نهایی و قراردادن صفحه‌های اصلی و اجزای Storyboard در آن است. در صورت امکان، محتوای اصلی به شکل Vector Content حفظ می‌شود تا کیفیت متن و خط‌ها هنگام بزرگ‌نمایی یا چاپ باقی بماند. برای PDF‌های دارای رمز که مسیر معمول قراردادن صفحه‌ها در سند جدید پاسخ نمی‌دهد، روش جایگزین مبتنی بر تصویر نیز ذکر شده است.

خروجی‌های معرفی‌شده شامل PDF نهایی، برگه‌های PNG و فایل ZIP حاوی تصویرهای جداگانه صفحه‌ها هستند. ساختار پیشنهادی پروژه هم مسئولیت‌ها را میان HTML برای ساختار صفحه، CSS برای ظاهر و JavaScript برای پردازش PDF،؜ توضیح‌ها، محاسبه چیدمان و دریافت فایل تقسیم می‌کند.

نکته کلیدی

در این پروژه، نقش PDF.js و PDF-lib را جدا نگه دار: اولی صفحه‌های ورودی را نمایش می‌دهد و دومی PDF خروجی را می‌سازد. یادت باشد حفظ محتوای اصلی به شکل Vector Content در خروجی، مشروط به امکان آن است.

خواندن مقاله اصلی (در زبانه‌ی جدید باز می‌شود)
برچسب‌ها (۳)