کتابخانه نمایشگر PDF جاوا اسکریپت منبع باز

PDFObject چیست؟

PDFObject یک کتابخانه جاوا اسکریپت منبع باز و رایگان است که برای جاسازی اسناد PDF در صفحات وب توسعه یافته است. با تولید یک عنصر HTML embed و سپس ادغام آن در ساختار HTML کار می کند. سپس عنصر embed سند PDF را رندر می کند. PDFObject خود یک رندر نیست. بلکه بر ایجاد عنصر embed و قرار دادن آن در HTML تمرکز می کند. می تواند عناصر جاسازی شده را برای نمایش فایل های PDF در اندازه کامل یا در بخش های مشخص شده از صفحه وب ایجاد کند.

برخی از ویژگی های اصلی PDFObject در زیر آمده است:

• مکانیسم بازگشتی: PDFObject دارای مکانیزم بازگشتی است، بنابراین در مواردی که مرورگر از جاسازی فایل‌های PDF پشتیبانی نمی‌کند، PDFObject به‌طور خودکار منطق بازگشتی را فعال می‌کند و به توسعه‌دهندگان اجازه می‌دهد پیوندی به PDF یا هر منطق جایگزین دیگری در صورت نیاز ارائه دهند. .
• ادغام PDF.js: PDFObject یکپارچه سازی اختیاری را با PDF.js فراهم می کند و به توسعه دهندگان امکان می دهد بدون توجه به PDF پیش فرض مرورگر، PDF ها را جاسازی کنند. بیننده این ویژگی زمانی مفید است که مرورگر از جاسازی اسناد PDF در HTML پشتیبانی نمی کند.
• پارامترهای باز PDF: PDFObject از پارامترهای باز PDF اختصاصی Adobe پشتیبانی می‌کند که به توسعه‌دهندگان اجازه می‌دهد پارامترهایی را برای نمایش PDF مشخص کنند. این شامل گزینه هایی مانند حالت مشاهده و سایر تنظیمات خاص Adobe است. همه این پارامترها را می‌توانید اینجا پیدا کنید.

آمار GitHub

نام:
زبان:
ستاره ها:
چنگال:
مجوز:
آخرین به روز رسانی مخزن در

شروع کار با PDFObject

ما می توانیم کتابخانه PDFObject را با استفاده از ماژول npm دانلود کنیم:

npm i pdfobject

با تأیید پشتیبانی مرورگر PDF را در HTML جاسازی کنید

ما می توانیم با استفاده از کتابخانه PDFObject یک سند PDF را در HTML جاسازی کنیم. در ابتدا بررسی می کنیم که آیا مرورگر از جاسازی سند PDF در HTML با استفاده از روش supportsPDFs کتابخانه PDFObject پشتیبانی می کند یا خیر. اگر درست را نشان دهد که نشان می دهد از جاسازی PDF در HTML پشتیبانی می کند، ما PDF را با استفاده از روش embed("document_name.pdf","#elementid") در HTML جاسازی می کنیم. این تابع PDF را در یک عنصر خاص در HTML جاسازی می کند. برای جاسازی PDF با اندازه کامل، هیچ شناسه عنصری را ذکر نمی کنیم و روش را به عنوان embed("document_name.pdf") فراخوانی می کنیم. با این حال، اگر false را برگرداند که نشان می‌دهد از تعبیه PDF در HTML پشتیبانی نمی‌کند، در صورت نیاز به منطق جایگزین دیگری می‌رویم. برای جزئیات، قطعه کد زیر را بررسی کنید:

خروجی

خروجی زیر سند PDF تعبیه شده در HTML را نمایش می دهد:

یک مکانیسم بازگشتی ایجاد کنید

ما می توانیم هنگام جاسازی PDF در یک صفحه وب با استفاده از PDFObject یک مکانیسم بازگشتی ایجاد کنیم که وقتی مرورگر از تعبیه PDF در HTML پشتیبانی نمی کند فعال می شود. PDFObject از پارامتری به نام fallbackLink استفاده می کند که حاوی یک منطق جایگزین هنگام فراخوانی تابع embed است. بنابراین، اگر مرورگر از جاسازی PDF پشتیبانی نمی‌کند، کد موجود در fallbackLink در عنصر div تعیین‌شده اجرا می‌شود. برای جزئیات، قطعه کد زیر را بررسی کنید:

خروجی

اسکرین شات خروجی محتوای نمایش داده شده توسط مکانیزم بازگشتی را نمایش می دهد. زمانی که مرورگر از جاسازی PDF در HTML پشتیبانی نمی کرد، مکانیسم بازگشتی فعال شد.

PDF را با پارامترهای باز PDF Adobe تعبیه کنید

با استفاده از کتابخانه PDFObject می توانیم فایل های PDF را به همراه برخی از پارامترهای بازکننده جاسازی کنیم. ما از روش PDFObject.embed("myfile.pdf", "#my-container", {pdfOpenParams: { پارامترها }}) برای جاسازی سند PDF در HTML به همراه پارامترهای بازکننده استفاده خواهیم کرد. . این پارامترهای باز PDF شامل ویژگی‌هایی مانند باز کردن PDF و پیمایش به یک شماره صفحه خاص است. برای جزئیات، قطعه کد زیر را بررسی کنید:

خروجی

تصویر زیر سند PDF را که در HTML جاسازی شده با پارامترهای اضافی نشان می دهد که باعث می شود عنصر جاسازی پس از رندر به صفحه شماره 3 برود:

با ادغام PDF.js PDF را جاسازی کنید

همانطور که می دانیم PDFObject به پشتیبانی مرورگر برای جاسازی فایل های PDF در HTML بستگی دارد، اما اگر مرورگر از آن پشتیبانی نمی کند، یک روش جایگزین برای رندر PDF ارائه می دهد. روش جایگزین ادغام PDF.js با PDFObject است. برای انجام این کار، باید PDF.js را روی سرور خود راه اندازی کنیم و سپس ForcePDFJS: true و PDFJS_URL: path/to/viewer.html/in/pdf را پاس می کنیم. js پارامترهای تابع embed.

توجه: در قطعه کد مثال زیر، سروری حاوی کتابخانه PDF.js ایجاد و راه اندازی کرده ایم، بنابراین http://localhost:8888 به کتابخانه PDF.js اشاره می کند.

خروجی

تصویر زیر سند PDF رندر شده را با ادغام PDFObject با PDF.js نشان می دهد:

نتیجه

در پایان، PDFObject یک کتابخانه جاوا اسکریپت با استفاده آسان برای جاسازی اسناد PDF در HTML است. در حالی که به عنوان یک رندر عمل نمی کند و به پشتیبانی مرورگر برای عناصر جاسازی متکی است که می تواند باعث مشکلاتی مانند خرابی رابط کاربری در مرورگرهایی شود که از عنصر جاسازی پشتیبانی نمی کنند، اما کتابخانه دارای ویژگی هایی برای حل چنین مشکلاتی از طریق تشخیص پشتیبانی است. جاسازی عنصر و مکانیسم بازگشتی همچنین می‌توانیم با ادغام PDF.js با PDFObject، فایل‌های PDF را در مرورگرهایی که از عناصر جاسازی پشتیبانی نمی‌کنند، رندر کنیم. PDFObject علیرغم محدودیت‌هایی که دارد، به عنوان یک ابزار ارزشمند برای جاسازی و ارائه اسناد PDF در صفحات وب متمایز است.

محصولات مشابه