react native render pdf
v1.0.12
ส่วนประกอบมุมมอง PDF ที่มีประสิทธิภาพสูงและมีคุณสมบัติสูงที่เขียนใน OBJ-C ++ สำหรับ iOS, Kotlin สำหรับ Android และ C ++ สำหรับ Windows
เราใช้ react-native-blob-util เพื่อจัดการการเข้าถึงระบบไฟล์ในแพ็คเกจนี้ดังนั้นคุณควรติดตั้ง React-native-render-render-render-pdf และ react-native-blob-util
ตารางด้านล่างแสดงเวอร์ชันที่รองรับของ React Native และ React-native-blob-util สำหรับรุ่นที่แตกต่างกันของ
react-native-render-pdf
| ตอบสนองพื้นเมือง | 0.57+ |
|---|---|
| React-native-render-pdf | 1.0.0+ |
| react-native-blob-util | 0.13.7+ |
Expo: แพ็คเกจนี้ไม่สามารถใช้งานได้ในแอพ Expo Go เรียนรู้วิธีที่คุณสามารถใช้แพ็คเกจนี้ในไคลเอนต์ dev ที่กำหนดเองผ่านปลั๊กอินการกำหนดค่า Expo Out-of-Tree ตัวอย่าง:
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 เข้ากับโครงการของคุณ:
ตอบสนองพื้นเมือง 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/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-pdfwindowsyourapp.sln )node_modulesreact-native-render-pdfwindowsRCTPdfRCTPdf.vcxprojnode_modulesreact-native-blob-utilwindowsReactNativeBlobUtilReactNativeBlobUtil.vcxprojprogress-view และในโครงการโซลูชันRCTPdf และ ReactNativeBlobUtilpch.h เพิ่ม #include "winrt/RCTPdf.h"#include "winrt/ReactNativeBlobUtil.h"App.cpp เพิ่ม PackageProviders().Append(winrt::progress_view::ReactPackageProvider()); ก่อน InitializeComponent();PackageProviders().Append(winrt::RCTPdf::ReactPackageProvider()); และ PackageProviders().Append(winrt::ReactNativeBlobUtil::ReactPackageProvider()); ในการเพิ่ม test.pdf เช่นในตัวอย่างเพิ่ม:
<None Include="....test.pdf">
<DeploymentContent>true</DeploymentContent>
</None>
ในไฟล์แอพ .vcxproj ก่อน <None Include="packages.config" />
Q1. หลังจากการติดตั้งและรันฉันไม่เห็นไฟล์ PDF
A1: บางทีคุณอาจลืมที่จะกระตุ้น react-native link หรือไม่ทำงานอย่างถูกต้อง คุณสามารถเพิ่มได้ด้วยตนเอง สำหรับรายละเอียดคุณสามารถดูปัญหา #24 และ #2
Q2. เมื่อทำงานมันจะแสดง 'Pdf' has no propType for native prop RCTPdf.acessibilityLabel of native type 'String'
a2. เวอร์ชันตอบสนองของคุณเก่าเกินไปโปรดอัพเกรดเป็น 0.47.0+ ดูที่ #39
Q3. เมื่อฉันเรียกใช้แอพตัวอย่างฉันได้รับหน้าจอสีขาว / สีเทา / แถบการโหลดไม่คืบหน้า
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
Q4. ทำไมมันไม่ทำงานกับ React Native Expo?
a4. Expo ไม่รองรับโมดูลดั้งเดิม คุณสามารถอ่านคำเตือนเพิ่มเติมได้ here
Q5. ทำไมฉันถึงเรียกใช้ตัวอย่าง 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 | หน้าต่าง | firstrelease |
|---|---|---|---|---|---|---|---|
| แหล่งที่มา | วัตถุ | ไม่เป็นโมฆะ | แหล่ง PDF เช่น {uri: xxx, แคช: false} ดูรายละเอียดต่อไปนี้ | 1.0.0 | |||
| หน้าหนังสือ | ตัวเลข | 1 | ดัชนีหน้าเริ่มต้น | 1.0.0 | |||
| มาตราส่วน | ตัวเลข | 1.0 | ควร minscale <= scale <= maxscale | 1.0.0 | |||
| ขนาดเล็ก | ตัวเลข | 1.0 | มาตราส่วนขั้นต่ำ | 1.0.0 | |||
| ขนาดสูงสุด | ตัวเลข | 3.0 | มาตราส่วนสูงสุด | 1.0.0 | |||
| ตามแนวนอน | บูล | เท็จ | วาดทิศทางหน้าหากคุณต้องการฟังการเปลี่ยนแปลงการวางแนวคุณสามารถใช้ [react-native-orientation-locker] | 1.0.0 | |||
| showshorizontalscrollindicator | บูล | จริง | แสดงหรือซ่อนตัวบ่งชี้แถบเลื่อนแนวนอนบน iOS | 1.0.0 | |||
| showsverticalscrollindicator | บูล | จริง | แสดงหรือซ่อนตัวบ่งชี้แถบเลื่อนแนวตั้งบน iOS | 1.0.0 | |||
| การพอดี | ตัวเลข | 2 | 0: ความกว้างพอดี, 1: ความสูงพอดี, 2: พอดีทั้งสอง (ค่าเริ่มต้น) | 1.0.0 | |||
| ระยะห่าง | ตัวเลข | 10 | ขนาดเบรกเกอร์ระหว่างหน้าเว็บ | 1.0.0 | |||
| รหัสผ่าน | สาย | - | รหัสผ่าน PDF หากข้อผิดพลาดรหัสผ่านจะเรียก onerror () ด้วยข้อความ "รหัสผ่านที่จำเป็นหรือรหัสผ่านที่ไม่ถูกต้อง" | 1.0.0 | |||
| สไตล์ | วัตถุ | {BackgroundColor: "#eeee"} | รองรับสไตล์มุมมองปกติคุณสามารถใช้สิ่งนี้เพื่อตั้งค่าสีขอบ/ระยะห่าง ... | 1.0.0 | |||
| renderactivityIndicator | (ความคืบหน้า) => ส่วนประกอบ | เมื่อโหลดแสดงเป็นตัวบ่งชี้คุณสามารถใช้ส่วนประกอบของคุณได้ | 1.0.0 | ||||
| enableantialiasing | บูล | จริง | ปรับปรุงการแสดงผลเล็กน้อยบนหน้าจอความละเอียดต่ำ แต่อาจจะมีปัญหาบางอย่างเกี่ยวกับ Android 4.4 ดังนั้นเพิ่มสวิตช์ | 1.0.0 | |||
| เปิดใช้งาน | บูล | เท็จ | แสดงเพียงหน้าเดียวในหน้าจอ | 1.0.0 | |||
| enablertl | บูล | เท็จ | หน้าเลื่อนเป็น "page3, page2, page1" | 1.0.0 | |||
| enableannotationrendering | บูล | จริง | เปิดใช้งานคำอธิบายประกอบการแสดงผลการแจ้งเตือน: iOS สนับสนุนการตั้งค่าเริ่มต้นเท่านั้นไม่สนับสนุนการเปลี่ยนแปลงเรียลไทม์ | 1.0.0 | |||
| TrustAllCerts | บูล | จริง | อนุญาตให้เชื่อมต่อกับเซิร์ฟเวอร์ที่มีการรับรองด้วยตนเอง | 1.0.0 | |||
| หน้าเดี่ยว | บูล | เท็จ | แสดงเฉพาะหน้าแรกมีประโยชน์สำหรับการดูรูปขนาดย่อ | 1.0.0 | |||
| onloadprogress | ฟังก์ชั่น (เปอร์เซ็นต์) | โมฆะ | โทรกลับเมื่อโหลดให้ส่งคืนความคืบหน้าการโหลด (0-1) | 1.0.0 | |||
| onloadcomplete | ฟังก์ชั่น (numberofpages, พา ธ , {ความกว้าง, ความสูง}, tablecontents) | โมฆะ | การโทรกลับเมื่อโหลด PDF เสร็จสมบูรณ์, ส่งคืนจำนวนหน้าทั้งหมด, PDF Local/Cache Path, {ความกว้าง, ความสูง} และสารบัญ | ✔ แต่ไม่มี tablecontents | 1.0.0 | ||
| เกี่ยวกับการถ่ายภาพ | ฟังก์ชั่น (หน้า, numberofpages) | โมฆะ | การโทรกลับเมื่อมีการเปลี่ยนแปลงหน้าส่งคืนหน้าปัจจุบันและจำนวนหน้าทั้งหมด | 1.0.0 | |||
| ผู้กระทำความผิด | ฟังก์ชั่น (ข้อผิดพลาด) | โมฆะ | โทรกลับเมื่อเกิดข้อผิดพลาด | 1.0.0 | |||
| OnPageSingletap | ฟังก์ชั่น (หน้า) | โมฆะ | โทรกลับเมื่อหน้าถูกเคาะเดี่ยว | 1.0.0 | |||
| ที่ได้ถูกทำให้เป็นจุด ๆ | ฟังก์ชั่น (มาตราส่วน) | โมฆะ | โทรกลับเมื่อหน้ามาตราส่วน | 1.0.0 | |||
| onpresslink | ฟังก์ชั่น (URI) | โมฆะ | โทรกลับเมื่อลิงค์เคาะ | 1.0.0 |
| พารามิเตอร์ | คำอธิบาย | ค่าเริ่มต้น | iOS | Android | หน้าต่าง |
|---|---|---|---|---|---|
| URI | แหล่งที่มาของ PDF ดูรายละเอียดเพื่อหารายละเอียด | ที่จำเป็น | |||
| แคช | ใช้แคชหรือไม่ | เท็จ | |||
| 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 ลงในโครงการโดย 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 |
*) ต้องการการสร้างปฏิกิริยาดั้งเดิมจากแหล่งที่มาด้วยแพตช์นี้
วิธีการทำงานบน Ref ไปยังองค์ประกอบ 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
