عرض ملفات PDF في تطبيق React الخاص بك دون مشكلة من خلال React-PDF

يتيح لك React-PDF عرض ملفات PDF كما لو كانت صورًا في تطبيق React دون أي متاعب أو باستخدام مكونات إضافية متعددة.

هناك العديد من المرات التي يحتاج فيها المطورون إلى إضافة ملفات PDF إلى تطبيقات React ، وبينما قد يكون من الصعب الحصول على الدقة أو الحجم أو التخطيط الصحيح ، يتيح لك React-PDF إضافة ملفات PDF إلى تطبيق React تمامًا مثل الصور. إنه مجاني للتنزيل ومفتوح المصدر وحزمة كاملة. تم تطوير React PDF باستخدام JavaScript و CSS وهو متوافق تمامًا مع أي تطبيق React.

هناك العديد من إصدارات React-PDF المتاحة حاليًا ، وآخرها هو React-PDF v5. تحصل الإصدارات الأخرى باستمرار على إصلاحات أخطاء وتحديثات أيضًا ، ومع ذلك ، فإن استخدام React-PDF v5 سيعطي نتائج مثالية.

من أجل استخدام React-PDF ، تأكد من أن تطبيق React الخاص بك يستخدم أحدث إصدار من React ، أي React 16.3 أو أحدث. إذا كنت تستخدم إصدارات قديمة من React ، فسيتعين عليك استخدام الإصدارات القديمة من React-PDF.

Previous Next

الشروع في العمل مع React-PDF

التوصية والأسهل طريقة للبدء هي التثبيت عبر npm ، فيما يلي الأمر.

قم بتثبيت React-PDF عبر npm

npm install react-pdf 

يمكنك أيضًا تثبيته يدويًا ؛ قم بتنزيل أحدث ملفات الإصدار مباشرة من مستودع GitHub .

عرض الأحرف غير اللاتينية في واجهة برمجة تطبيقات JavaSrcipt المجانية

تتيح مكتبة React-PDF مفتوحة المصدر لمطوري البرامج عرض الأحرف غير اللاتينية برمجيًا داخل التطبيق الخاص بهم باستخدام أوامر JavaScript. يحتوي React-PDF على دعم الأحرف غير اللاتينية أيضًا ، وإذا كنت تريد التأكد من عرض أي أحرف غير لاتينية بشكل صحيح عند عرض ملف PDF في مشروع ما ، فيمكنك القيام بذلك باستخدام cMaps المنسوخة من pdfjs-dist.

قم بتحميل صفحات PDF مفردة أو متعددة باستخدام واجهة برمجة تطبيقات JavaScript API مجانية

تسمح لك علامة المستند بتحميل مستند PDF يتم تمريره عبر خاصية الملف. باستخدام هذه العلامة ، يمكنك إما تحميل صفحة واحدة أو عدة صفحات ، أو إضافة التنقل أيضًا. يمكنك أيضًا تمييز النص على الصفحة ، وإظهار جدول المحتويات بطريقة تفاعلية ، وتوفير ارتباطات خارجية أيضًا.

كيفية عرض صفحة PDF واحدة عبر JavaScript API

import React from 'react';
import { Document, Page } from 'react-pdf';
import samplePDF from './test.pdf';
export default function Test() {
  return (
    
      
    
  );
}

إدارة التعليقات التوضيحية في مستندات PDF عبر JavaScript

مكتبة JavaScript مفتوحة المصدر تمنح React-PDF المبرمجين القدرة على إدارة أنواع مختلفة من التعليقات التوضيحية داخل مستندات PDF الخاصة بهم برمجيًا. يرجى تذكر أن المستخدم يحتاج إلى تضمين ورقة الأنماط اللازمة لعرض التعليقات التوضيحية بشكل صحيح. يسمح للمستخدمين بالتمييز والنص والحبر والملاحظات والأشكال والمزيد بسهولة.

كيفية التعامل مع الروابط الخارجية في ملفات PDF عبر JavaScript

import React, { useState } from 'react';
import { Document, Outline, Page } from 'react-pdf';
import samplePDF from './test.pdf';
export default function Test() {
  const [pageNumber, setPageNumber] = useState(1);
  function onItemClick({ pageNumber: itemPageNumber }) {
    setPageNumber(itemPageNumber);
  }
  return (
    
      
    
  );
}
 عربي