react native render pdf
v1.0.12
Un composant de vue PDF natif de haute performance et riche en fonctionnalités écrits en OBJ-C ++ pour iOS, Kotlin pour Android et C ++ pour Windows
Nous utilisons react-native-blob-util pour gérer l'accès au système de fichiers dans ce package, vous devez donc installer React-Native-Render-PDF et React-Native-Blob-Util
Le tableau ci-dessous montre les versions prises en charge de React Native et React-Native-Blob-Util pour différentes versions de
react-native-render-pdf.
| React natif | 0,57+ |
|---|---|
| react-natif-rendu-PDF | 1.0.0+ |
| réactif-natif-blob-util | 0,13,7+ |
Expo: Ce package n'est pas disponible dans l'application Expo Go. Découvrez comment utiliser ce package dans des clients de développement personnalisés via le plugin d'expo hors arbre. Exemple:
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-utilSuivez ensuite les instructions pour que votre plate-forme lie React-Native-Render-PDF dans votre projet:
React natif 0,60 et plus
Exécutez pod install dans le répertoire ios . La liaison n'est pas requise dans React Native 0,60 et au-dessus.
React natif 0,59 et moins
react-native link react-native-blob-util
react-native link react-native-render-pdf** Ajouter le suivi à votre Android / build.gradle **
ext {
...
+ kotlinVersion = "1.9.24' // or latest
...
}Si vous utilisez RN 0,59.0 et supérieur , veuillez ajouter le suivant à votre 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 natif 0,59,0 et moins
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 et de solutionRCTPdf et ReactNativeBlobUtilpch.h ajoutez #include "winrt/RCTPdf.h"#include "winrt/ReactNativeBlobUtil.h"App.cpp ajoutez PackageProviders().Append(winrt::progress_view::ReactPackageProvider()); avant InitializeComponent();PackageProviders().Append(winrt::RCTPdf::ReactPackageProvider()); et PackageProviders().Append(winrt::ReactNativeBlobUtil::ReactPackageProvider()); Pour ajouter un test.pdf comme dans l'exemple, ajoutez:
<None Include="....test.pdf">
<DeploymentContent>true</DeploymentContent>
</None>
Dans le fichier app .vcxproj , avant <None Include="packages.config" /> .
Q1. Après l'installation et l'exécution, je ne peux pas voir le fichier PDF.
A1: Peut-être que vous avez oublié d'excuser react-native link ou qu'il ne fonctionne pas correctement. Vous pouvez l'ajouter manuellement. Pour plus de détails, vous pouvez voir le numéro #24 et #2
Q2. Lors de l'exécution, il affiche 'Pdf' has no propType for native prop RCTPdf.acessibilityLabel of native type 'String'
A2. Votre version réactive-native est trop ancienne, veuillez la mettre à niveau à 0.47.0+ Voir aussi #39
Q3. Lorsque j'exécute l'application d'exemple, j'obtiens un écran blanc / gris / La barre de chargement ne progresse pas.
A3. Vérifiez votre URI, si vous appuyez sur un PDF hébergé sur un http vous devrez effectuer ce qui suit:
IOS: Ajoutez une exception pour le serveur hébergeant le PDF dans iOS info.plist . Voici un exemple:
<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. Pourquoi cela ne fonctionne-t-il pas avec React Native Expo ?.
A4. Expo ne prend pas en charge le module natif. Vous pouvez lire plus d'expo de mises en garde here
Q5. Pourquoi ne puis-je pas exécuter l'exemple iOS? 'Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65.'
A5. Exécutez les commandes suivantes dans le dossier du projet (par exemple react-native-render-pdf/example ) pour s'assurer que toutes les dépendances sont disponibles:
yarn install (or npm install)
cd ios
pod install
cd ..
react-native run-ios
[plus]
/**
* 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 ,
} ,
} ) ;| Propriété | Taper | Défaut | Description | ios | Androïde | Fenêtre | Foi |
|---|---|---|---|---|---|---|---|
| source | objet | pas nul | PDF Source Like {uri: xxx, cache: false}. Voir ce qui suit pour le détail. | ✔ | ✔ | ✔ | 1.0.0 |
| page | nombre | 1 | Index de page initiale | ✔ | ✔ | ✔ | 1.0.0 |
| échelle | nombre | 1.0 | Devrait MinScale <= échelle <= maxscale | ✔ | ✔ | ✔ | 1.0.0 |
| à l'échelle minimale | nombre | 1.0 | échelle min | ✔ | ✔ | ✔ | 1.0.0 |
| maxscale | nombre | 3.0 | échelle maximale | ✔ | ✔ | ✔ | 1.0.0 |
| horizontal | bool | FAUX | Dessinez la direction de la page, si vous souhaitez écouter le changement d'orientation, vous pouvez utiliser [React-Native-Orientation-Locker] | ✔ | ✔ | ✔ | 1.0.0 |
| showshorizontalscrollindicator | bool | vrai | montre ou cache l'indicateur de barre de défilement horizontal sur iOS | ✔ | 1.0.0 | ||
| showverticalscrollindicator | bool | vrai | montre ou cache l'indicateur de barre de défilement vertical sur iOS | ✔ | 1.0.0 | ||
| fitpolicy | nombre | 2 | 0: Largeur d'ajustement, 1: hauteur d'ajustement, 2: ajuster les deux (par défaut) | ✔ | ✔ | ✔ | 1.0.0 |
| espacement | nombre | 10 | la taille du disjoncteur entre les pages | ✔ | ✔ | ✔ | 1.0.0 |
| mot de passe | chaîne | "" | Le mot de passe PDF, si l'erreur de mot de passe, appellera OnError () avec le message "Mot de passe requis ou mot de passe incorrect". | ✔ | ✔ | ✔ | 1.0.0 |
| style | objet | {backgroundColor: "# eee"} | Prise en charge du style de vue normale, vous pouvez l'utiliser pour définir les couleurs de bordure / d'espacement ... | ✔ | ✔ | ✔ | 1.0.0 |
| rendez-vous | (Progress) => Composant | Lors du chargement, le montrez comme indicateur, vous pouvez utiliser votre composant | ✔ | ✔ | ✖ | 1.0.0 | |
| désayant | bool | vrai | Améliorez un peu de rendu sur les écrans basse résolution, mais peut-être un problème sur Android 4.4, alors ajoutez un commutateur | ✖ | ✔ | ✖ | 1.0.0 |
| permettre | bool | FAUX | Afficher une seule page dans l'écran | ✔ | ✔ | ✔ | 1.0.0 |
| ipertertl | bool | FAUX | Page de défilement comme "Page3, Page2, Page1" | ✔ | ✖ | ✔ | 1.0.0 |
| pertinence | bool | vrai | Activer l'annotation de rendu, avis: iOS ne prend en charge que le paramètre initial, pas en prenant en charge le changement en temps réel | ✔ | ✔ | ✖ | 1.0.0 |
| TrustAllCerts | bool | vrai | Autoriser les connexions aux serveurs avec certification auto-signée | ✔ | ✔ | ✖ | 1.0.0 |
| une seule page | bool | FAUX | Afficher uniquement la première page, utile pour les vues miniatures | ✔ | ✔ | ✔ | 1.0.0 |
| onloadProgress | fonction (pourcentage) | nul | rappel lors du chargement, renvoyez le chargement de la progression (0-1) | ✔ | ✔ | ✖ | 1.0.0 |
| onloadcomplete | fonction (nombre de pages, chemin, {largeur, hauteur}, tableaux) | nul | Rappel Lorsque le chargement PDF est terminé, renvoyez le nombre total de pages, le chemin PDF local / cache, {largeur, hauteur} et table des matières | ✔ | ✔ | ✔ mais sans tablecontents | 1.0.0 |
| onPageChanged | Fonction (page, nombreofPages) | nul | rappel lorsque la page a changé, renvoyez la page actuelle et le nombre total de pages | ✔ | ✔ | ✔ | 1.0.0 |
| onerror | fonction (erreur) | nul | rappel lorsque l'erreur s'est produite | ✔ | ✔ | ✔ | 1.0.0 |
| onpageingletap | fonction (page) | nul | rappel lorsque la page a été unique | ✔ | ✔ | ✔ | 1.0.0 |
| oncalechanged | fonction (échelle) | nul | rappel lorsque la page d'échelle | ✔ | ✔ | ✔ | 1.0.0 |
| onPressLink | fonction (URI) | nul | rappel lorsque le lien a tapé | ✔ | ✔ | ✖ | 1.0.0 |
| paramètre | Description | défaut | ios | Androïde | Fenêtre |
|---|---|---|---|---|---|
| uri | Source PDF, voir la déception pour le détail. | requis | ✔ | ✔ | ✔ |
| cache | Utilisez du cache ou non | FAUX | ✔ | ✔ | ✖ |
| cachefilename | Nom de fichier spécifique pour le fichier PDF mis en cache | Résultat MD5 (URI) | ✔ | ✔ | ✖ |
| expiration | Fichier de cache expiré secondes (0 n'est pas expiré) | 0 | ✔ | ✔ | ✖ |
| méthode | Méthode de demande lorsque URI est une URL | "OBTENIR" | ✔ | ✔ | ✖ |
| têtes | Demandez les en-têtes lorsque URI est une URL | {} | ✔ | ✔ | ✖ |
| Usage | Description | ios | Androïde | Fenêtre |
|---|---|---|---|---|
{uri:"http://xxx/xxx.pdf"} | Chargez le PDF à partir d'une URL | ✔ | ✔ | ✔ |
{require("./test.pdf")} | Chargement PDF concerne le fichier JS (je n'ai pas besoin d'ajouter par xcode) | ✔ | ✖ | ✖ |
{uri:"bundle-assets://path/to/xxx.pdf"} | Chargez le PDF à partir des actifs, le fichier doit être sur Android / App / Src / Main / Assets / Path / To / xxx.pdf | ✖ | ✔ | ✖ |
{uri:"bundle-assets://xxx.pdf"} | Chargez le PDF à partir des actifs, vous devez ajouter PDF au projet par Xcode. Cela ne prend pas en charge le dossier. | ✔ | ✖ | ✖ |
{uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."} | Chargez le PDF de la chaîne Base64 | ✔ | ✔ | ✔ |
{uri:"file:///absolute/path/to/xxx.pdf"} | Chargez le PDF à partir du système de fichiers local | ✔ | ✔ | ✔ |
{uri:"ms-appx:///xxx.pdf"}} | Chargez le PDF groupé avec l'application UWP | ✖ | ✖ | ✔ |
{uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"} | Chargez le PDF à partir du contenu uri | ✔ * | ✖ | ✖ |
{uri:"blob:xxxxxxxx-...?offset=0&size=xxx"} | Chargez le PDF de l'URL blob | ✖ | ✔ | ✖ |
*) nécessite la construction de réagir natifs de la source avec ce patch
Les méthodes fonctionnent sur un élément PDF. Vous pouvez obtenir une référence avec le code suivant:
return (
<Pdf
ref={(pdf) => { this.pdf = pdf; }}
source={source}
...
/>
);
setPage(pageNumber)
Définissez la page actuelle du composant PDF. PageNumber est un entier positif. Si PageNumber> NumberOfPages, la page actuelle n'est pas modifiée.
Exemple:
this.pdf.setPage(42); // Display the answer to the Ultimate Question of Life, the Universe, and Everything
