الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

رد الفعل-Render-PDF

مكون PDF الأصلي Rich Rich Rich Rich Rich React مكتوب في OBJ-C ++ لنظام التشغيل iOS و Kotlin for Android و C ++ لنظام التشغيل Windows

ميزة

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

الإصدارات المدعومة

نستخدم react-native-blob-util لمعالجة وصول نظام الملفات في هذه الحزمة ، لذلك يجب عليك تثبيت React-Native-Render-PDF و React-Blob-Util

يوضح الجدول أدناه الإصدارات المدعومة من React Native و React-Blob-UTIL لإصدارات مختلفة من react-native-render-pdf .

رد فعل مواطن 0.57+
رد الفعل-Render-PDF 1.0.0+
رد الفعل-بلوب-أوتيل 0.13.7+

المعرض: هذه الحزمة غير متوفرة في تطبيق Expo GO. تعرف على كيفية استخدام هذه الحزمة في عملاء Dev المخصص عبر المكون الإضافي Config Out-Tree Expo. مثال: with-pdf .

تثبيت 

 # Using npm
npm install react-native-render-pdf react-native-blob-util --save

# or using yarn:
yarn add react-native-render-pdf react-native-blob-util

ثم اتبع الإرشادات الخاصة بمنصةك لربط React-Native-Render-PDF في مشروعك:

تثبيت iOS

تفاصيل iOS

رد فعل مواطن 0.60 وما فوق

قم بتشغيل pod install في دليل ios . الربط غير مطلوب في React Native 0.60 وما فوق.

رد فعل مواطن 0.59 وتحت 

react-native link react-native-blob-util
react-native link react-native-render-pdf

تثبيت Android

تفاصيل Android

** أضف متابعًا إلى Android/Build.gradle ** 

ext {
  ...
+   kotlinVersion = "1.9.24' // or latest
  ...
}

إذا كنت تستخدم RN 0.59.0 وما فوق ، فيرجى إضافة ما يلي إلى Android/App/Build.gradle ** 

android {

+    packagingOptions {
+       pickFirst 'lib/x86/libc++_shared.so'
+       pickFirst 'lib/x86_64/libjsc.so'
+       pickFirst 'lib/arm64-v8a/libjsc.so'
+       pickFirst 'lib/arm64-v8a/libc++_shared.so'
+       pickFirst 'lib/x86_64/libc++_shared.so'
+       pickFirst 'lib/armeabi-v7a/libc++_shared.so'
+     }

   }

رد فعل مواطن 0.59.0 وتحت 

react-native link react-native-blob-util
react-native link react-native-render-pdf

تثبيت Windows

تفاصيل Windows
  • افتح الحل الخاص بك في Visual Studio 2019 (على سبيل المثال. windowsyourapp.sln )
  • انقر بزر الماوس الأيمن فوق أيقونة حل الحلول> إضافة> المشروع الحالي ...
  • إذا تم تشغيل RNW 0.62: إضافة node_modulesreact-native-render-pdfwindowsRCTPdfRCTPdf.vcxproj
  • إذا تم تشغيل RNW 0.62: إضافة node_modulesreact-native-blob-utilwindowsReactNativeBlobUtilReactNativeBlobUtil.vcxproj
  • انقر بزر الماوس الأيمن فوق مشروع التطبيق الرئيسي> إضافة> مرجع ...
  • حدد progress-view وفي مشاريع الحلول
    • في حالة تشغيل 0.62 ، حدد أيضًا RCTPdf و ReactNativeBlobUtil
  • في التطبيق pch.h إضافة #include "winrt/RCTPdf.h"
    • إذا كان تشغيل 0.62 ، حدد أيضًا #include "winrt/ReactNativeBlobUtil.h"
  • in App.cpp أضف PackageProviders().Append(winrt::progress_view::ReactPackageProvider()); قبل InitializeComponent();
    • في حالة تشغيل RNW 0.62 ، قم أيضًا بإضافة PackageProviders().Append(winrt::RCTPdf::ReactPackageProvider()); و PackageProviders().Append(winrt::ReactNativeBlobUtil::ReactPackageProvider());

تجميع PDFs مع التطبيق

لإضافة test.pdf كما في المثال ، أضف: 

 <None Include="....test.pdf">
  <DeploymentContent>true</DeploymentContent>
</None>

في ملف .vcxproj App ، قبل أن يكون <None Include="packages.config" /> .

التعليمات

تفاصيل الأسئلة الشائعة

س 1. بعد التثبيت والتشغيل ، لا يمكنني رؤية ملف PDF.
A1: ربما نسيت أن تتفوق على react-native link أو لا يتم تشغيله بشكل صحيح. يمكنك إضافته يدويًا. لمزيد من التفاصيل ، يمكنك رؤية المشكلة #24 و #2

س 2. عند الجري ، يظهر 'Pdf' has no propType for native prop RCTPdf.acessibilityLabel of native type 'String'
A2. الإصدار الخاص بك من قبل React-One Oppert ، يرجى ترقيته إلى 0.47.0+ انظر أيضًا #39

س 3. عندما أقوم بتشغيل تطبيق المثال ، أحصل على شاشة بيضاء / رمادية / لا يتقدم شريط التحميل.
A3. تحقق من URI الخاص بك ، إذا وصلت إلى ملف PDF الذي يتم استضافته على http ، فستحتاج إلى القيام بما يلي:

iOS: أضف استثناءً للخادم الذي يستضيف PDF في iOS info.plist . هنا مثال: 

 <key>NSAppTransportSecurity</key>
<dict>
  <key>NSExceptionDomains</key>
  <dict>
    <key>yourserver.com</key>
    <dict>
      <!--Include to allow subdomains-->
      <key>NSIncludesSubdomains</key>
      <true/>
      <!--Include to allow HTTP requests-->
      <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
      <true/>
      <!--Include to specify minimum TLS version-->
      <key>NSTemporaryExceptionMinimumTLSVersion</key>
      <string>TLSv1.1</string>
    </dict>
  </dict>
</dict>

Android: see here

س 4. لماذا لا تعمل مع React Native Expo؟.
A4. المعرض لا يدعم الوحدة النمطية الأصلية. يمكنك قراءة المزيد من تحذيرات المعرض here

س 5. لماذا لا يمكنني تشغيل مثال iOS؟ 'Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65.'
A5. قم بتشغيل الأوامر التالية في مجلد المشروع (مثل react-native-render-pdf/example ) للتأكد من توفر جميع التبعيات: 

 yarn install (or npm install)
cd ios
pod install
cd ..
react-native run-ios

[أكثر]

مثال 

 /**
 * Original Author: Wonday (@wonday.org) Copyright (c) 2017-present
 * Copyright (c) 2024-present, Staxtech (@gidraphdanford.dev)
 * All rights reserved.
 *
 * This source code is licensed under the MIT-style license found in the
 * LICENSE file in the root directory of this source tree.
 */

import React from "react" ;
import { StyleSheet , Dimensions , View } from "react-native" ;
import Pdf from "react-native-render-pdf" ;

export default class PDFExample extends React . Component {
  render ( ) {
    const source = {
      uri : "http://samples.leanpub.com/thereactnativebook-sample.pdf" ,
      cache : true ,
    } ;
    //const source = require('./test.pdf');  // ios only
    //const source = {uri:'bundle-assets://test.pdf' };
    //const source = {uri:'file:///sdcard/test.pdf'};
    //const source = {uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."};
    //const source = {uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"};
    //const source = {uri:"blob:xxxxxxxx-...?offset=0&size=xxx"};

    return (
      < View style = { styles . container } >
        < Pdf
          source = { source }
          onLoadComplete = { ( numberOfPages , filePath ) => {
            console . log ( `Number of pages: ${ numberOfPages } ` ) ;
          } }
          onPageChanged = { ( page , numberOfPages ) => {
            console . log ( `Current page: ${ page } ` ) ;
          } }
          onError = { ( error ) => {
            console . log ( error ) ;
          } }
          onPressLink = { ( uri ) => {
            console . log ( `Link pressed: ${ uri } ` ) ;
          } }
          style = { styles . pdf }
        />
      </ View >
    ) ;
  }
}

const styles = StyleSheet . create ( {
  container : {
    flex : 1 ,
    justifyContent : "flex-start" ,
    alignItems : "center" ,
    marginTop : 25 ,
  } ,
  pdf : {
    flex : 1 ,
    width : Dimensions . get ( "window" ) . width ,
    height : Dimensions . get ( "window" ) . height ,
  } ,
} ) ;

إعدادات

ملكية يكتب تقصير وصف iOS Android النوافذ firstreease
مصدر هدف ليس لاغ PDF مصدر مثل {uri: xxx ، ذاكرة التخزين المؤقت: false}. انظر ما يلي للحصول على التفاصيل. ✔ ✔ ✔ 1.0.0
صفحة رقم 1 فهرس الصفحة الأولية ✔ ✔ ✔ 1.0.0
حجم رقم 1.0 يجب أن minscale <= مقياس <= maxscale ✔ ✔ ✔ 1.0.0
minscale رقم 1.0 مقياس دقيقة ✔ ✔ ✔ 1.0.0
maxscale رقم 3.0 أقصى مقياس ✔ ✔ ✔ 1.0.0
أفقي بول خطأ شنيع ارسم اتجاه الصفحة ، إذا كنت ترغب في الاستماع إلى تغيير الاتجاه ، فيمكنك استخدام [React-Native-toficiping-locker] ✔ ✔ ✔ 1.0.0
showshorizontalscrollindicator بول حقيقي يظهر أو يخفي مؤشر شريط التمرير الأفقي على iOS ✔ 1.0.0
DisperStericScrollIndicator بول حقيقي يظهر أو يخفي مؤشر شريط التمرير العمودي على iOS ✔ 1.0.0
fitpolicy رقم 2 0. ✔ ✔ ✔ 1.0.0
التباعد رقم 10 حجم الكسارة بين الصفحات ✔ ✔ ✔ 1.0.0
كلمة المرور خيط "" " كلمة مرور PDF ، إذا كان خطأ كلمة المرور ، سوف تتصل بـ onerror () مع رسالة "كلمة مرور مطلوبة أو كلمة مرور غير صحيحة." ✔ ✔ ✔ 1.0.0
أسلوب هدف {BackgroundColor: "#eee"} دعم نمط العرض العادي ، يمكنك استخدام هذا لضبط لون الحدود/التباعد ... ✔ ✔ ✔ 1.0.0
enderactivityIndicator (تقدم) => المكون عند تحميله يُظهره كمؤشر ، يمكنك استخدام المكون الخاص بك ✔ ✔ ✖ 1.0.0
التمكين بول حقيقي تحسين تقديم قليلاً على الشاشات منخفضة الدقة ، ولكن ربما قم بدورة بعض المشكلة على Android 4.4 ، لذا أضف مفتاحًا ✖ ✔ ✖ 1.0.0
تمكين بول خطأ شنيع عرض صفحة واحدة فقط في الشاشة ✔ ✔ ✔ 1.0.0
enablertl بول خطأ شنيع صفحة التمرير باسم "Page3 ، Page2 ، Page1" ✔ ✖ ✔ 1.0.0
enileNnotationRendering بول حقيقي تمكين عرض التعليق التوضيحي ، إشعار: iOS يدعم فقط الإعداد الأولي ، وليس دعم التغيير الحقيقي ✔ ✔ ✖ 1.0.0
TrustallCerts بول حقيقي السماح للاتصالات بالخوادم ذات الشهادة الموقعة ذاتيا ✔ ✔ ✖ 1.0.0
صفحة واحدة بول خطأ شنيع عرض الصفحة الأولى فقط ، مفيدة لوجهات النظر المصغرة ✔ ✔ ✔ 1.0.0
OnloadProgress وظيفة (في المئة) باطل رد الاتصال عند التحميل ، إرجاع التقدم المحمل (0-1) ✔ ✔ ✖ 1.0.0
OnloadComplete دالة (رقم الصفحات ، المسار ، {العرض ، الارتفاع} ، مداخل مداخن) باطل رد الاتصال عند الانتهاء من تحميل PDF ، إرجاع إجمالي صفحات الصفحات ، مسار PDF المحلي/ذاكرة التخزين المؤقت ، {العرض ، الارتفاع} وجدول المحتويات ✔ ✔ ✔ ولكن بدون مداخل مداخن 1.0.0
onpagechanged وظيفة (الصفحة ، رقم الصفحات) باطل رد الاتصال عندما تغير الصفحة ، إرجاع الصفحة الحالية وعدد الصفحات الإجمالية ✔ ✔ ✔ 1.0.0
onerror وظيفة (خطأ) باطل رد الاتصال عندما حدث خطأ ✔ ✔ ✔ 1.0.0
onpagesingletap وظيفة (صفحة) باطل رد الاتصال عندما تم استغلال الصفحة واحدة ✔ ✔ ✔ 1.0.0
Onscalechanged وظيفة (مقياس) باطل رد الاتصال عند صفحة المقياس ✔ ✔ ✔ 1.0.0
OnPressLink وظيفة (URI) باطل رد الاتصال عند استغلال الرابط ✔ ✔ ✖ 1.0.0

معلمات المصدر

المعلمة وصف تقصير iOS Android النوافذ
أوري مصدر PDF ، انظر forllowing للحصول على التفاصيل. مطلوب ✔ ✔ ✔
مخبأ استخدم ذاكرة التخزين المؤقت أم لا خطأ شنيع ✔ ✔ ✖
cachefilename اسم ملف محدد لملف PDF المخزنة مؤقتًا نتيجة MD5 (URI) ✔ ✔ ✖
انتهاء منتهي صلاحية ملف ذاكرة التخزين المؤقت (0 لا ينتهي صلاحية) 0 ✔ ✔ ✖
طريقة طريقة الطلب عندما يكون URI عنوان URL "يحصل" ✔ ✔ ✖
الرؤوس طلب الرؤوس عندما يكون URI عنوان URL {} ✔ ✔ ✖

أنواع المصدر

الاستخدام وصف iOS Android النوافذ
{uri:"http://xxx/xxx.pdf"} تحميل PDF من عنوان URL ✔ ✔ ✔
{require("./test.pdf")} تحميل PDF تتعلق بملف JS (لا تحتاج إلى إضافة بواسطة XCode) ✔ ✖ ✖
{uri:"bundle-assets://path/to/xxx.pdf"} تحميل PDF من الأصول ، يجب أن يكون الملف في Android/APP/SRC/MAIN/ASSETS/PATH/TO/XXX.PDF ✖ ✔ ✖
{uri:"bundle-assets://xxx.pdf"} قم بتحميل PDF من الأصول ، يجب عليك إضافة PDF إلى Project by Xcode. هذا لا يدعم المجلد. ✔ ✖ ✖
{uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."} تحميل PDF من سلسلة BASE64 ✔ ✔ ✔
{uri:"file:///absolute/path/to/xxx.pdf"} تحميل PDF من نظام الملفات المحلي ✔ ✔ ✔
{uri:"ms-appx:///xxx.pdf"}} تحميل PDF مجمعة مع تطبيق UWP ✖ ✖ ✔
{uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"} تحميل PDF من المحتوى URI ✔* ✖ ✖
{uri:"blob:xxxxxxxx-...?offset=0&size=xxx"} تحميل pdf من url blob ✖ ✔ ✖

*) يتطلب بناء رد فعل من المصدر مع هذا التصحيح

طُرق

  • setpage

تعمل الأساليب على المرجع لعنصر PDF. يمكنك الحصول على المرجع مع الكود التالي: 

 return (
  <Pdf
    ref={(pdf) => { this.pdf = pdf; }}
    source={source}
    ...
  />
);

setPage ()

setPage(pageNumber)

اضبط الصفحة الحالية لمكون PDF. الوثمان هو عدد صحيح إيجابي. إذا كانت Pagenumber> رقم pagges ، فإن الصفحة الحالية لم يتم تغييرها.

مثال: 

 this.pdf.setPage(42); // Display the answer to the Ultimate Question of Life, the Universe, and Everything

الأعمال المشتقة والمساهمات اعتراف

  • بناءً على العمل الأصلي الذي قام به Wonday React-Native-PDF
  • ينفذ مكتبة رد الفعل-الأميال-بلوب للوصول إلى نظام الملفات
  • ينفذ مكتبة Android-PDFView Fork لـ Android بواسطة Infomaniak
  • ينفذ شوكة pdfiumandroid بواسطة Infomaniak
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل