หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ด JAVA
ดาวน์โหลด

react-native-pdf.pdf

องค์ประกอบมุมมอง PDF ดั้งเดิมแบบโต้ตอบ (รองรับข้ามแพลตฟอร์ม)

คุณสมบัติ

  • อ่าน PDF จาก url, blob, ไฟล์ในเครื่องหรือเนื้อหาและสามารถแคชได้
  • แสดงแนวนอนหรือแนวตั้ง
  • ลากและซูม
  • แตะสองครั้งเพื่อซูม
  • รองรับไฟล์ PDF ที่ป้องกันด้วยรหัสผ่าน
  • ข้ามไปยังหน้าเฉพาะใน pdf

รุ่นที่รองรับ

เราใช้ react-native-blob-util เพื่อจัดการการเข้าถึงระบบไฟล์ในแพ็คเกจนี้ ดังนั้นคุณควรติดตั้ง react-native-pdf และ react-native-blob-util

ตารางด้านล่างแสดงเวอร์ชันที่รองรับของ React Native และ react-native-blob-util สำหรับ react-native-pdf เวอร์ชันต่างๆ

ตอบสนองพื้นเมือง 0.4x - 0.56 0.57 0.60+ 0.62+ 0.62+
react-native-pdf.pdf 4.xx - 5.0.x 5.0.9+ 6.0.0+ 6.2.0+ 6.4.0+
react-native-blob-util 0.13.7+

Expo: แพ็คเกจนี้ไม่สามารถใช้ได้ในแอป Expo Go เรียนรู้วิธีใช้แพ็คเกจนี้ใน Custom Dev Clients ผ่านทางปลั๊กอินการกำหนดค่า Expo นอกแผนผัง ตัวอย่าง: with-pdf

การติดตั้ง 

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

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

จากนั้นทำตามคำแนะนำสำหรับแพลตฟอร์มของคุณเพื่อลิงก์ react-native-pdf เข้ากับโปรเจ็กต์ของคุณ:

การติดตั้ง iOS

รายละเอียดไอโอเอส

ตอบสนอง Native 0.60 ขึ้นไป

เรียกใช้ pod install ในไดเร็กทอรี ios ไม่จำเป็นต้องทำการลิงก์ใน React Native 0.60 ขึ้นไป

ตอบสนอง Native 0.59 และต่ำกว่า 

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

การติดตั้งระบบ Android

รายละเอียดแอนดรอย

หากคุณใช้ 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'
+     }

   }

React Native 0.59.0 และต่ำกว่า 

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

การติดตั้งวินโดวส์

รายละเอียดวินโดวส์
  • เปิดโซลูชันของคุณใน Visual Studio 2019 (เช่น windowsyourapp.sln )
  • คลิกขวาที่ไอคอนโซลูชันใน Solution Explorer > เพิ่ม > โปรเจ็กต์ที่มีอยู่...
  • หากรัน RNW 0.62: ให้เพิ่ม node_modulesreact-native-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"
  • ใน App.cpp ให้เพิ่ม PackageProviders().Append(winrt::progress_view::ReactPackageProvider()); ก่อน InitializeComponent();
    • หากรัน RNW 0.62 ให้เพิ่ม PackageProviders().Append(winrt::RCTPdf::ReactPackageProvider()); และ PackageProviders().Append(winrt::ReactNativeBlobUtil::ReactPackageProvider());

การรวมไฟล์ PDF เข้ากับแอป

หากต้องการเพิ่ม test.pdf เหมือนในตัวอย่างให้เพิ่ม: 

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

ในไฟล์แอป .vcxproj ก่อน <None Include="packages.config" />

คำถามที่พบบ่อย

รายละเอียดคำถามที่พบบ่อย

ไตรมาสที่ 1 หลังจากติดตั้งและใช้งานแล้ว ฉันไม่สามารถดูไฟล์ pdf ได้
คำตอบ 1: บางทีคุณอาจลืมที่จะระงับ react-native link หรือทำงานไม่ถูกต้อง คุณสามารถเพิ่มได้ด้วยตนเอง สำหรับรายละเอียด คุณสามารถดูปัญหา #24 และ #2

ไตรมาสที่ 2 เมื่อทำงาน จะแสดงว่า 'Pdf' has no propType for native prop RCTPdf.acessibilityLabel of native type 'String'
A2. เวอร์ชัน React-Native ของคุณเก่าเกินไป โปรดอัปเกรดเป็น 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>

แอนดรอยด์: see here

ไตรมาสที่ 4 เหตุใดจึงไม่ทำงานกับ react Native expo
A4. Expo ไม่รองรับโมดูลดั้งเดิม คุณสามารถอ่านคำเตือนงานแสดงสินค้าเพิ่มเติมได้ here

คำถามที่ 5 เหตุใดฉันจึงไม่สามารถเรียกใช้ตัวอย่าง iOS ได้ 'Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65.'
A5. รันคำสั่งต่อไปนี้ในโฟลเดอร์โปรเจ็กต์ (เช่น react-native-pdf/example ) เพื่อให้แน่ใจว่าการอ้างอิงทั้งหมดพร้อมใช้งาน: 

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

บันทึกการเปลี่ยนแปลง

รายละเอียดบันทึกการเปลี่ยนแปลง v6.7.6 1. แก้ไข: เพิ่ม 'enableDoubleTapZoom' ที่ขาดหายไปให้กับแหล่ง codegen ผ้า (#832) 2. แก้ไข: เพิ่ม prop 'scrollEnabled' ที่ขาดหายไป (#842) 3. แก้ไข: java.lang.IllegalStateException: พยายามเข้าถึงโมดูล JS ก่อนที่อินสแตนซ์ React จะได้รับการตั้งค่าอย่างสมบูรณ์ (#840) 4. แก้ไขแล้ว: ปัญหาที่ขัดข้องเมื่อไม่มีการยกเลิก (#852) 5. เพิ่มแล้ว: เพิ่มวิธีการโหลด (#861) 6. แก้ไขแล้ว: อักขระเน้นเสียงที่เข้ารหัสถูกถอดรหัสไม่ถูกต้อง (#873) 7. แก้ไขแล้ว: แก้ไขข้อบกพร่องของ EnableDoubleTapZoom

เวอร์ชัน 6.7.5

  1. เพิ่มเสาความคืบหน้าContainerStyle
  2. ปรับปรุง: เพิ่มตัวเลือก EnableDoubleTapZoom
  3. แก้ไขแล้ว: แก้ไขข้อขัดข้องของแอปด้วย this.lastRNBFTask.cancel ไม่ใช่ฟังก์ชัน (#827)
  4. แก้ไข: ลบการแทนที่เพื่อแก้ไขข้อผิดพลาด 'ไม่มีวิธีการแทนที่ที่ตรงกัน' (#822)

เวอร์ชัน 6.7.4

  1. แก้ไขแล้ว: แก้ไขปัญหาข้อขัดข้องของ Android

เวอร์ชัน 6.7.3

  1. แก้ไขแล้ว: แก้ไขชื่อแพ็คเกจ Android

เวอร์ชัน 6.7.2

  1. แก้ไขแล้ว: แก้ไขการเลื่อนการซูมด้วยการแตะสองครั้งของ iOS
  2. แก้ไขแล้ว: แก้ไขความเข้ากันได้ของ RN 73
  3. แก้ไข: ชน crypto-js เพื่อหลีกเลี่ยงช่องโหว่ที่สำคัญ

เวอร์ชัน 6.7.1

  1. แก้ไขแล้ว: แก้ไขการตั้งค่าโครงการ iOS
  2. แก้ไข: แก้ไขการพิมพ์ผิดในอินเทอร์เฟซ RNPDFPdfViewManagerInterface ที่ทำให้เกิดข้อผิดพลาดในการสร้าง Android

เวอร์ชัน 6.7.0

  1. แก้ไขแล้ว: แก้ไข (iOS): หน้ากึ่งกลางที่จุดแตะหลังจากแตะสองครั้งเพื่อซูม
  2. แก้ไข: เพิ่ม PDFKit ลงใน podspec เพื่อให้ iOS คอมไพล์
  3. ปรับปรุงแล้ว: อัปเดต build.gradle เพื่อรองรับ RN 0.71 บนส่วนโค้งใหม่
  4. แก้ไขแล้ว: แก้ไขข้อบกพร่องและเอกสารเล็กๆ น้อยๆ

เวอร์ชัน 6.6.2

  1. แก้ไข: โยกย้ายไปยัง ViewPropTypes ที่ส่งออกจาก 'deprecated-react-native-prop-types'
  2. เพิ่ม: ถอดรหัสเส้นทางไฟล์สำหรับ iOS
  3. ปรับปรุงแล้ว: ต้องการหน้าปัจจุบันสำหรับการคำนวณปัจจัยขนาดพอดี

v6.6.1 หดหู่

v6.6.0 ตกต่ำ

  1. แก้ไข: โยกย้ายไปยัง ViewPropTypes ที่ส่งออกจาก 'deprecated-react-native-prop-types'
  2. เพิ่ม: ถอดรหัสเส้นทางไฟล์สำหรับ iOS
  3. ปรับปรุงแล้ว: ต้องการหน้าปัจจุบันสำหรับการคำนวณปัจจัยขนาดพอดี
  4. ปรับปรุง: แหล่งที่มาเวอร์ชัน typescript

เวอร์ชัน 6.5.0

  1. แก้ไข: แทนที่ mavenCentral ด้วย maven
  2. การเปลี่ยนแปลงที่ทำลายล้าง (Android): แทนที่พื้นที่เก็บข้อมูลที่เลิกใช้แล้ว: jcenter()
  3. แก้ไข: ความคืบหน้าในการโหลด
  4. เพิ่ม: พิมพ์เสา "แหล่งที่มา"
  5. ลบ: การพึ่งพา fbjs

เวอร์ชัน 6.4.0

  1. ลบตัวอย่างเพื่อลดขนาดบรรจุภัณฑ์ NPM
  2. เพิ่มการสนับสนุนสำหรับการตั้งชื่อไฟล์สำหรับไฟล์ PDF ที่แคชไว้
  3. ใช้ react-native-blob-util แทน rn-fetch-blob
  4. เพิ่มการสนับสนุนหยด
  5. ลบการพึ่งพามุมมองความคืบหน้า

เวอร์ชัน 6.3.0

  1. เพิ่มการรองรับหน้าต่าง
  2. แก้ไขข้อบกพร่องบางอย่าง

[มากกว่า]

ตัวอย่าง 

 /**
 * Copyright (c) 2017-present, Wonday (@wonday.org)
 * 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-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 ,
    }
} ) ;

การกำหนดค่า

คุณสมบัติ พิมพ์ ค่าเริ่มต้น คำอธิบาย ไอโอเอส หุ่นยนต์ หน้าต่าง ปล่อยครั้งแรก
แหล่งที่มา วัตถุ ไม่เป็นโมฆะ แหล่งที่มาของ PDF เช่น {uri:xxx, cache:false} ดูรายละเอียดต่อไปนี้ <3.0
หน้าหนังสือ ตัวเลข 1 ดัชนีหน้าเริ่มต้น <3.0
มาตราส่วน ตัวเลข 1.0 ควร minScale<=scale<=maxScale <3.0
มาตราส่วนขั้นต่ำ ตัวเลข 1.0 สเกลขั้นต่ำ 5.0.5
แม็กซ์สเกล ตัวเลข 3.0 ขนาดสูงสุด 5.0.5
แนวนอน บูล เท็จ วาดทิศทางของหน้า หากคุณต้องการฟังการเปลี่ยนแปลงการวางแนว คุณสามารถใช้ [react-native-orientation-locker] <3.0
แสดงตัวบ่งชี้แนวนอนเลื่อน บูล จริง แสดงหรือซ่อนตัวบ่งชี้แถบเลื่อนแนวนอนบน iOS 6.6
แสดง VerticalScrollIndicator บูล จริง แสดงหรือซ่อนตัวบ่งชี้แถบเลื่อนแนวตั้งบน iOS 6.6
เลื่อนเปิดใช้งานแล้ว บูล จริง เปิดหรือปิดการเลื่อน 6.6
พอดีความกว้าง บูล เท็จ หากเป็นจริงพอดีกับความกว้างของมุมมอง ไม่สามารถใช้ fitWidth=true ร่วมกับสเกลได้ <3.0 ละทิ้งจาก 3.0
นโยบายพอดี ตัวเลข 2 0:พอดีความกว้าง, 1:พอดีความสูง, 2:พอดีทั้งสอง(ค่าเริ่มต้น) 3.0
ระยะห่าง ตัวเลข 10 ขนาดเบรกเกอร์ระหว่างหน้า <3.0
รหัสผ่าน เชือก - รหัสผ่าน pdf หากรหัสผ่านผิดพลาด จะเรียก OnError() พร้อมข้อความ "ต้องใช้รหัสผ่านหรือรหัสผ่านไม่ถูกต้อง" <3.0
สไตล์ วัตถุ {สีพื้นหลัง:"#eee"} รองรับรูปแบบมุมมองปกติ คุณสามารถใช้สิ่งนี้เพื่อตั้งค่าสีเส้นขอบ/ระยะห่าง... <3.0
ความคืบหน้าContainerStyle วัตถุ {สีพื้นหลัง:"#eee"} รองรับรูปแบบมุมมองปกติ คุณสามารถใช้สิ่งนี้เพื่อตั้งค่าสีเส้นขอบ/ระยะห่าง... 6.9.0
renderActivityIndicator (ความคืบหน้า) => ส่วนประกอบ เมื่อโหลดแสดงเป็นตัวบ่งชี้ คุณสามารถใช้ส่วนประกอบของคุณได้ <3.0
เปิดใช้งานการลดรอยหยัก บูล จริง ปรับปรุงการเรนเดอร์เล็กน้อยบนหน้าจอความละเอียดต่ำ แต่อาจมีปัญหาบางอย่างบน Android 4.4 ดังนั้นให้เพิ่มสวิตช์ <3.0
เปิดใช้งานเพจจิ้ง บูล เท็จ แสดงเพียงหน้าเดียวในหน้าจอ 5.0.1
เปิดใช้งานRTL บูล เท็จ เลื่อนหน้าเป็น "page3, page2, page1" 5.0.1
เปิดใช้งาน AnnotationRendering บูล จริง เปิดใช้งานคำอธิบายประกอบการเรนเดอร์ หมายเหตุ: iOS รองรับเฉพาะการตั้งค่าเริ่มต้นเท่านั้น ไม่รองรับการเปลี่ยนแปลงแบบเรียลไทม์ 5.0.3
เปิดใช้งาน DoubleTapZoom บูล จริง เปิดใช้งานการแตะสองครั้งเพื่อซูมท่าทาง 6.8.0
ไว้วางใจAllCerts บูล จริง อนุญาตการเชื่อมต่อกับเซิร์ฟเวอร์ด้วยการรับรองที่ลงนามด้วยตนเอง 6.0.?
หน้าเดียว บูล เท็จ แสดงเฉพาะหน้าแรก มีประโยชน์สำหรับการชมภาพขนาดย่อ 6.2.1
onLoadProgress ฟังก์ชั่น(ร้อยละ) โมฆะ โทรกลับเมื่อโหลด ส่งคืนความคืบหน้าในการโหลด (0-1) <3.0
เมื่อโหลดเสร็จสมบูรณ์ ฟังก์ชั่น (numberOfPages, เส้นทาง, {ความกว้าง, ความสูง}, tableContents) โมฆะ โทรกลับเมื่อโหลด PDF เสร็จสิ้น ส่งคืนจำนวนหน้าทั้งหมด เส้นทาง PDF ในเครื่อง/แคช {ความกว้าง ความสูง} และสารบัญ ✔ แต่ไม่มีตารางเนื้อหา <3.0
บนเพจมีการเปลี่ยนแปลง ฟังก์ชั่น (หน้า, จำนวนหน้า) โมฆะ โทรกลับเมื่อมีการเปลี่ยนแปลงหน้า ส่งคืนหน้าปัจจุบันและจำนวนหน้าทั้งหมด <3.0
บนข้อผิดพลาด ฟังก์ชั่น (ข้อผิดพลาด) โมฆะ โทรกลับเมื่อเกิดข้อผิดพลาด <3.0
onPageSingleTap ฟังก์ชั่น(หน้า) โมฆะ โทรกลับเมื่อแตะหน้าเดียว 3.0
บน ScaleChanged ฟังก์ชั่น (มาตราส่วน) โมฆะ โทรกลับเมื่อปรับขนาดหน้า 3.0
บนกดLink ฟังก์ชั่น (ยูริ) โมฆะ โทรกลับเมื่อแตะลิงก์ 6.0.0

พารามิเตอร์ของแหล่งที่มา

พารามิเตอร์ คำอธิบาย ค่าเริ่มต้น ไอโอเอส หุ่นยนต์ หน้าต่าง
ยูริ แหล่งที่มา pdf ดูรายละเอียดที่ forllowing ที่จำเป็น
แคช ใช้แคชหรือไม่ เท็จ
cacheFileName ชื่อไฟล์เฉพาะสำหรับไฟล์ PDF ที่แคชไว้ ผลลัพธ์ SHA1(uri)
การหมดอายุ ไฟล์แคชหมดอายุวินาที (0 ยังไม่หมดอายุ) 0
วิธี วิธีการขอเมื่อ uri เป็น url "รับ"
ส่วนหัว ขอส่วนหัวเมื่อ uri เป็น url -

ประเภทของ source.uri

การใช้งาน คำอธิบาย ไอโอเอส หุ่นยนต์ หน้าต่าง
{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 ลงในโปรเจ็กต์ด้วย 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 จาก blob URL

*) จำเป็นต้องสร้าง React Native จากแหล่งที่มาด้วยแพตช์นี้

วิธีการ

  • setPage

วิธีการดำเนินการโดยอ้างอิงถึงองค์ประกอบ PDF คุณสามารถรับการอ้างอิงด้วยรหัสต่อไปนี้: 

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

เซ็ตเพจ()

setPage(pageNumber)

ตั้งค่าหน้าปัจจุบันของส่วนประกอบ PDF pageNumber เป็นจำนวนเต็มบวก ถ้า pageNumber > numberOfPages หน้าปัจจุบันจะไม่เปลี่ยนแปลง

ตัวอย่าง: 

 this.pdf.setPage(42); // Display the answer to the Ultimate Question of Life, the Universe, and Everything
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด