react native render pdfダウンロード-React react native render pdfソースコードダウンロード

react native render pdf

その他のソースコード

v1.0.12

ダウンロード

React-Native Render-PDF

IOS用のOBJ-C ++で記述された高性能と機能リッチネイティブPDFビューコンポーネント、Android用のKotlin、Windows用C ++

特徴

URL、BLOB、ローカルファイル、または資産からPDFを読み、キャッシュできます。
水平または垂直に表示します
ドラッグとズーム
ズームのダブルタップ
サポートパスワードで保護されたPDF
PDFの特定のページにジャンプします

サポートされているバージョン

react-native-blob-utilを使用してこのパッケージのファイルシステムアクセスを処理するため、React-Native Render-PDFとReact-Native-Blob-Utilをインストールする必要があります

以下の表はreact-native-render-pdfのさまざまなバージョンのReact NativeおよびReact-Native-Blob-Utilのサポートされているバージョンを示しています。

ネイティブの反応	0.57+
React-Native Render-PDF	1.0.0+
React-native-blob-util	0.13.7+

Expo：このパッケージはExpo Goアプリでは利用できません。このパッケージをカスタム開発するクライアントで使用する方法を学びます。例： 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以上を反応します

iosディレクトリにpod install実行します。リンクは、反応ネイティブ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も選択します
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を追加するには、add：

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

app .vcxprojファイルでは、 <None Include="packages.config" />前に。

よくある質問

FAQの詳細

Q1。インストールと実行後、PDFファイルが表示されません。
A1： react-native linkをエクスパートするのを忘れてしまうかもしれませんし、正しく実行されません。手動で追加できます。詳細については、問題#24と#2見ることができます

Q2。実行中、 'Pdf' has no propType for native prop RCTPdf.acessibilityLabel of native type 'String'
A2。 React-Nativeバージョンが古すぎるので、0.47.0+にアップグレードしてください#39も参照してください

Q3。サンプルアプリを実行すると、白 /灰色のスクリーンが表示されます。ロードバーは進行していません。
A3。 URIを確認してください。HTTPで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。 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	アンドロイド	Windows	FIRSTRELEASE
ソース	物体	ヌルではありません	{uri：xxx、cache：false}のようなpdfソース。詳細については、以下を参照してください。	✔	✔	✔	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
fitpolicy	番号	2	0：フィット幅、1：フィット高さ、2：両方をフィット（デフォルト）	✔	✔	✔	1.0.0
間隔	番号	10	ページ間のブレーカーサイズ	✔	✔	✔	1.0.0
パスワード	弦	""	PDFパスワードは、パスワードエラーの場合、「パスワードが必要または誤ったパスワード」というメッセージでONERROR（）を呼び出します。	✔	✔	✔	1.0.0
スタイル	物体	{backgroundcolor： "＃eee"}	通常のビュースタイルをサポートすると、これを使用してボーダー/間隔の色を設定できます...	✔	✔	✔	1.0.0
renderActivityindicator	（進行状況）=>コンポーネント		ロードすると、インジケーターとして表示すると、コンポーネントを使用できます	✔	✔	✖	1.0.0
有効化	ブール	真実	Low-Res画面で少しレンダリングを改善しますが、Android 4.4で問題をコースにするので、スイッチを追加します	✖	✔	✖	1.0.0
有効化	ブール	間違い	画面に1つのページのみを表示します	✔	✔	✔	1.0.0
anablertl	ブール	間違い	ページを「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	function（numberofpages、path、{width、height}、favereconts）	ヌル	コールバックPDF負荷が完了したとき、合計ページ数を返し、PDFローカル/キャッシュパス、{幅、高さ}、および目次	✔	✔	cutibut表contentsがありません	1.0.0
オンページチェンジ	関数（ページ、numberofpages）	ヌル	ページが変更されたときにコールバック、現在のページを返し、合計ページカウント	✔	✔	✔	1.0.0
onerror	関数（エラー）	ヌル	エラーが発生したときにコールバック	✔	✔	✔	1.0.0
onpagesingletap	関数（ページ）	ヌル	ページがシングルタップされたときのコールバック	✔	✔	✔	1.0.0
scalechanged	関数（スケール）	ヌル	スケールページのときにコールバック	✔	✔	✔	1.0.0
onpresslink	関数（URI）	ヌル	リンクがタップされたときのコールバック	✔	✔	✖	1.0.0

ソースのパラメーター

パラメーター	説明	デフォルト	iOS	アンドロイド	Windows
uri	PDFソース、詳細についてはForllowingを参照してください。	必須	✔	✔	✔
キャッシュ	キャッシュを使用するかどうか	間違い	✔	✔	✖
cachefilename	キャッシュされたPDFファイルの特定のファイル名	MD5（URI）結果	✔	✔	✖
有効期限	キャッシュファイルの有効期限が切れます（0は期限切れになりません）	0	✔	✔	✖
方法	URIがURLの場合のリクエスト方法	"得る"	✔	✔	✖
ヘッダー	URIがURLの場合はヘッダーをリクエストします	{}	✔	✔	✖

source.uriの種類

使用法	説明	iOS	アンドロイド	Windows
`{uri:"http://xxx/xxx.pdf"}`	URLからPDFをロードします	✔	✔	✔
`{require("./test.pdf")}`	JSファイルに関連するPDFをロードします（xcodeによる追加は必要ありません）	✔	✖	✖
`{uri:"bundle-assets://path/to/xxx.pdf"}`	AssetsからPDFをロードすると、ファイルはAndroid/app/src/main/assets/path/to/xxx.pdfにある必要があります	✖	✔	✖
`{uri:"bundle-assets://xxx.pdf"}`	AssetsからPDFをロードするには、XcodeでプロジェクトにPDFを追加する必要があります。これはフォルダーをサポートしません。	✔	✖	✖
`{uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."}`	Base64文字列からPDFをロードします	✔	✔	✔
`{uri:"file:///absolute/path/to/xxx.pdf"}`	ローカルファイルシステムからPDFをロードします	✔	✔	✔
`{uri:"ms-appx:///xxx.pdf"}}`	UWPアプリにバンドルされたPDFをロードします	✖	✖	✔
`{uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"}`	コンテンツURIからPDFをロードします	✔*	✖	✖
`{uri:"blob:xxxxxxxx-...?offset=0&size=xxx"}`	Blob URLからPDFをロードします	✖	✔	✖

*）このパッチでソースからネイティブの反応を必要とする

方法

セットページ

メソッドは、PDF要素のrefで動作します。次のコードでrefを取得できます。

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

setPage（）

setPage(pageNumber)

PDFコンポーネントの現在のページを設定します。ページナンバーはポジティブな整数です。 pageNumber> numberofpagesの場合、現在のページは変更されません。

例：

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

派生した作品と貢献の承認

Wonday React-Native-PDFによるオリジナルの作品に基づいています
ファイルシステムアクセスのためにReact-Native-Blob-Utilライブラリを実装します
InfomaniakによるAndroid用のAndroid-PDFViewフォークライブラリを実装します
InfomaniakによるPdfiumandroidフォークを実装します

拡大する

追加情報

バージョン v1.0.12
タイプその他のソースコード
更新時間 2025-05-21
サイズ 179.68KB
から Github

react native render pdf