react native render pdf下載 - react native render pdf源代碼下載

react native render pdf

其他源碼

v1.0.12

下載

反應呈渲染pdf

高性能和功能豐富的React本機PDF視圖組件用OBJ-C ++編寫的iOS，kotlin for Android和Windows的C ++

特徵

從URL，BLOB，本地文件或資產中讀取PDF，並可以緩存。
水平或垂直顯示
拖動和變焦
雙擊縮放
支持密碼保護PDF
跳到PDF中的特定頁面

支持版本

我們使用react-native-blob-util來處理此軟件包中的文件系統訪問

下表顯示了不同版本的反應呈現react-native-render-pdf天然和反應本機式餐具的支持版本。

反應天然	0.57+
反應呈渲染pdf	1.0.0+
反應本地式 - 烏蒂	0.13.7+

博覽會：該軟件包在Expo Go應用程序中不可用。了解如何通過脫離樹的Expo Config插件在自定義開發客戶端中使用此軟件包。示例： 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-native-render-PDF鏈接到您的項目中：

iOS安裝

iOS詳細信息

反應天然0.60及以上

在ios目錄中運行pod install 。 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 ）
右鍵單擊解決方案探索器中的解決方案圖標> add>現有項目...
如果運行RNW 0.62：添加node_modulesreact-native-render-pdfwindowsRCTPdfRCTPdf.vcxproj
如果運行rnw 0.62：添加node_modulesreact-native-blob-utilwindowsReactNativeBlobUtilReactNativeBlobUtil.vcxproj
右鍵單擊主應用程序>添加>參考...
選擇progress-view和解決方案項目
- 如果運行0.62，也選擇RCTPdf和ReactNativeBlobUtil
在app 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>

在app .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，如果您擊中了在http上託管的PDF，則需要執行以下操作：

iOS：添加有關託管iOS info.plist中PDF的服務器的異常。這是一個示例：

 <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。博覽會不支持本地模塊。您可以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	安卓	視窗	firstrease
來源	目的	不是零	pdf源，例如{uri：xxx，cache：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-nistrientation-Locker]	✔	✔	✔	1.0.0
ShowShorizontalsCrollindicator	布爾	真的	在iOS上顯示或隱藏水平滾動條指示器	✔			1.0.0
顯示crollindicator	布爾	真的	在iOS上顯示或隱藏垂直滾動條指示器	✔			1.0.0
fitpolicy	數字	2	0：適合寬度，1：適合高度，2：適合兩者（默認）	✔	✔	✔	1.0.0
間距	數字	10	頁面之間的斷路器大小	✔	✔	✔	1.0.0
密碼	細繩	“”	PDF密碼（如果密碼錯誤）將帶有消息“需要密碼或不正確的密碼”的OnError（）。	✔	✔	✔	1.0.0
風格	目的	{BackgroundColor：“＃eee”}	支持正常視圖樣式，您可以使用它來設置邊框/間距顏色...	✔	✔	✔	1.0.0
渲染性調節器	（進度）=>組件		當加載作為指示器顯示時，您可以使用組件	✔	✔	✖	1.0.0
啟示性	布爾	真的	在低分辨率屏幕上改善渲染一點，但也許在Android 4.4上有一些問題，因此請添加一個開關	✖	✔	✖	1.0.0
啟用	布爾	錯誤的	僅在屏幕上顯示一頁	✔	✔	✔	1.0.0
enableertl	布爾	錯誤的	滾動頁面為“ 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，路徑，{width，height}，tablecontents）	無效的	PDF負載完成後，回調，返回總頁數，PDF Local/Cache Path，{width，Height}和目錄表	✔	✔	✔但沒有湯匙	1.0.0
Onpagechanged	功能（頁面，編號頁）	無效的	頁面更改時回調，返回當前頁面和總頁數計數	✔	✔	✔	1.0.0
Onerror	功能（錯誤）	無效的	發生錯誤時回調	✔	✔	✔	1.0.0
OnPagesingLeTap	功能（頁面）	無效的	單身敲擊時回調	✔	✔	✔	1.0.0
在Scalechanged上	功能（比例）	無效的	比例頁面時回調	✔	✔	✔	1.0.0
OnPressLink	功能（URI）	無效的	鏈接點擊時回調	✔	✔	✖	1.0.0

來源的參數

範圍	描述	預設	ios	安卓	視窗
Uri	PDF源，請參閱詳細信息。	必需的	✔	✔	✔
快取	使用是否使用緩存	錯誤的	✔	✔	✖
cachefilename	緩存PDF文件的特定文件名	MD5（URI）結果	✔	✔	✖
到期	緩存文件過期的秒（0未過期）	0	✔	✔	✖
方法	URI是URL的請求方法	“得到”	✔	✔	✖
標題	uri是URL時請求標題	{}	✔	✔	✖

Source.uri的類型

用法	描述	ios	安卓	視窗
`{uri:"http://xxx/xxx.pdf"}`	從URL加載PDF	✔	✔	✔
`{require("./test.pdf")}`	加載PDF與JS文件有關（不需要添加Xcode）	✔	✖	✖
`{uri:"bundle-assets://path/to/xxx.pdf"}`	從資產加載PDF，該文件應在Android/app/src/src/main/Assets/path/to/xxx.pdf上	✖	✔	✖
`{uri:"bundle-assets://xxx.pdf"}`	從資產加載PDF，您必須將PDF添加到XCode項目中。這不支持文件夾。	✔	✖	✖
`{uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."}`	從base64字符串加載PDF	✔	✔	✔
`{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"}`	從內容URI加載PDF	✔*	✖	✖
`{uri:"blob:xxxxxxxx-...?offset=0&size=xxx"}`	從Blob URL加載PDF	✖	✔	✖

*）需要使用此補丁的來源建造本機

方法

setpage

方法可在REF上操作到PDF元素。您可以使用以下代碼獲得參考：

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

setPage（）

setPage(pageNumber)

設置PDF組件的當前頁面。 Pagenumber是一個積極的整數。如果Pagenumber> numberOfpages，則沒有更改當前頁面。

例子：

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

派生的作品和貢獻確認

基於Wonday React-native-PDF的原始工作
實現用於文件系統訪問的反應本機庫庫
通過Infomaniak實現Android的Android-Pdfview fork庫
通過Infomaniak實現PDFiumandroid叉

展開

附加信息

版本 v1.0.12
類型其他源碼
更新時間 2025-05-21
大小 179.68KB
來自於 Github

相關應用

ComfyUI IC Light Native

2024-11-15
PDFBox PDF處理類別庫v3.0.0 alpha2

2024-11-14
react native

2024-11-14
PDF Shaper Pro

2024-11-06
PDF Mpjex 應用程式

2023-07-05
極光PDF app

2023-05-19

爲您推薦

chat.petals.dev

其他源碼

1.0.0
GPT Prompt Templates

其他源碼

1.0.0
GPTyped

其他源碼

GPTyped 1.0.5
Google Dorks

其他源碼

1.0
shepherd

其他源碼

v6.1.6-react-shepherd: Prepare Release (#3063)
mongo express

其他源碼

v1.1.0-rc-3
Google Dorks

其他源碼

1.0
shepherd

其他源碼

v6.1.6-react-shepherd: Prepare Release (#3063)
mongo express

其他源碼

v1.1.0-rc-3

相關資訊全部