react native pdf
v6.7.1
Un composant de vue PDF natif React (prise en charge multiplateforme)
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-pdf et React-native-blob-util.
Le tableau ci-dessous présente les versions prises en charge de React Native et de React-native-blob-util pour différentes versions de
react-native-pdf.
| Réagir natif | 0,4x - 0,56 | 0,57 | 0,60+ | 0,62+ | 0,62+ |
|---|---|---|---|---|---|
| réagir-natif-pdf | 4.xx - 5.0.x | 5.0.9+ | 6.0.0+ | 6.2.0+ | 6.4.0+ |
| réagir-native-blob-util | 0.13.7+ |
Expo : ce package n'est pas disponible dans l'application Expo Go. Découvrez comment utiliser ce package dans les clients de développement personnalisés via le plug-in Expo Config hors arborescence. Exemple :
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-utilSuivez ensuite les instructions de votre plateforme pour lier React-Native-pdf à votre projet :
React Native 0.60 et supérieur
Exécutez pod install dans le répertoire ios . La liaison n’est pas requise dans React Native 0.60 et versions ultérieures.
React Native 0.59 et versions antérieures
react-native link react-native-blob-util
react-native link react-native-pdfSi vous utilisez RN 0.59.0 et supérieur , veuillez ajouter ce qui suit à 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 Native 0.59.0 et versions antérieures
react-native link react-native-blob-util
react-native link react-native-pdfwindowsyourapp.sln )node_modulesreact-native-pdfwindowsRCTPdfRCTPdf.vcxprojnode_modulesreact-native-blob-utilwindowsReactNativeBlobUtilReactNativeBlobUtil.vcxprojprogress-view et dans Projets 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" /> .
T1. Après l'installation et l'exécution, je ne vois pas le fichier pdf.
A1 : peut-être avez-vous oublié d’exécuter react-native link ou il ne fonctionne pas correctement. Vous pouvez l'ajouter manuellement. Pour plus de détails, vous pouvez voir les numéros #24 et #2
Q2. Lors de l'exécution, il indique que 'Pdf' has no propType for native prop RCTPdf.acessibilityLabel of native type 'String'
A2. Votre version React-Native est trop ancienne, veuillez la mettre à niveau vers 0.47.0+ voir aussi #39
Q3. Lorsque j'exécute l'exemple d'application, j'obtiens un écran blanc/gris/la barre de chargement ne progresse pas.
A3. Vérifiez votre uri, si vous accédez à un pdf hébergé sur un http vous devrez procéder comme suit :
iOS : ajoutez une exception pour le serveur hébergeant le pdf dans le fichier 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 de mises en garde sur l'expo 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-pdf/example ) pour vous assurer que toutes les dépendances sont disponibles :
yarn install (or npm install)
cd ios
pod install
cd ..
react-native run-ios
v6.7.5
v6.7.4
v6.7.3
v6.7.2
v6.7.1
v6.7.0
v6.6.2
v6.6.1 déprimé
v6.6.0 déprimé
v6.5.0
v6.4.0
v6.3.0
[plus]
/**
* 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 ,
}
} ) ;| Propriété | Taper | Défaut | Description | IOS | Androïde | Fenêtres | Première version |
|---|---|---|---|---|---|---|---|
| source | objet | pas nul | Source PDF comme {uri:xxx, cache:false}. voir ce qui suit pour plus de détails. | ✔ | ✔ | ✔ | <3,0 |
| page | nombre | 1 | index de la page initiale | ✔ | ✔ | ✔ | <3,0 |
| échelle | nombre | 1.0 | devrait minScale<=scale<=maxScale | ✔ | ✔ | ✔ | <3,0 |
| échellemin | nombre | 1.0 | échelle minimale | ✔ | ✔ | ✔ | 5.0.5 |
| échellemax | nombre | 3.0 | échelle maximale | ✔ | ✔ | ✔ | 5.0.5 |
| horizontal | bouffon | FAUX | dessinez la direction de la page, si vous souhaitez écouter le changement d'orientation, vous pouvez utiliser [react-native-orientation-locker] | ✔ | ✔ | ✔ | <3,0 |
| showsHorizontalScrollIndicator | bouffon | vrai | affiche ou masque l'indicateur de la barre de défilement horizontale sur iOS | ✔ | 6.6 | ||
| showsVerticalScrollIndicator | bouffon | vrai | affiche ou masque l'indicateur de la barre de défilement verticale sur iOS | ✔ | 6.6 | ||
| scrollEnabled | bouffon | vrai | activer ou désactiver le défilement | ✔ | 6.6 | ||
| ajustementLargeur | bouffon | FAUX | si vrai, correspond à la largeur de la vue, ne peut pas utiliser fitWidth=true avec l'échelle | ✔ | ✔ | ✔ | <3.0, abandonné de 3.0 |
| fitPolitique | nombre | 2 | 0 : largeur d'ajustement, 1 : hauteur d'ajustement, 2 : ajustement aux deux (par défaut) | ✔ | ✔ | ✔ | 3.0 |
| espacement | nombre | 10 | la taille du séparateur entre les pages | ✔ | ✔ | ✔ | <3,0 |
| mot de passe | chaîne | "" | Le mot de passe pdf, en cas d'erreur de mot de passe, appellera OnError() avec le message "Mot de passe requis ou mot de passe incorrect." | ✔ | ✔ | ✔ | <3,0 |
| style | objet | {backgroundColor:"#eee"} | prend en charge le style d'affichage normal, vous pouvez l'utiliser pour définir la couleur de la bordure/espacement... | ✔ | ✔ | ✔ | <3,0 |
| progressContainerStyle | objet | {backgroundColor:"#eee"} | prend en charge le style d'affichage normal, vous pouvez l'utiliser pour définir la couleur de la bordure/espacement... | ✔ | ✔ | ✔ | 6.9.0 |
| renderActivityIndicator | (progression) => Composant | lors du chargement, affichez-le comme indicateur, vous pouvez utiliser votre composant | ✔ | ✔ | ✖ | <3,0 | |
| activer l'anticrénelage | bouffon | vrai | améliorer un peu le rendu sur les écrans basse résolution, mais peut-être bien sûr un problème sur Android 4.4, donc ajouter un switch | ✖ | ✔ | ✖ | <3,0 |
| activer la pagination | bouffon | FAUX | afficher seulement une page à l'écran | ✔ | ✔ | ✔ | 5.0.1 |
| activerRTL | bouffon | FAUX | faire défiler la page comme "page3, page2, page1" | ✔ | ✖ | ✔ | 5.0.1 |
| activerAnnotationRendering | bouffon | vrai | activer l'annotation de rendu, remarque : iOS ne prend en charge que le paramètre initial, ne prend pas en charge le changement en temps réel | ✔ | ✔ | ✖ | 5.0.3 |
| activerDoubleTapZoom | bouffon | vrai | Activer le double appui pour zoomer sur le geste | ✔ | ✔ | ✖ | 6.8.0 |
| trustAllCerts | bouffon | vrai | Autoriser les connexions aux serveurs avec une certification auto-signée | ✔ | ✔ | ✖ | 6.0.? |
| page unique | bouffon | FAUX | Afficher uniquement la première page, utile pour les vues miniatures | ✔ | ✔ | ✔ | 6.2.1 |
| onLoadProgress | fonction (pourcentage) | nul | rappel lors du chargement, renvoie la progression du chargement (0-1) | ✔ | ✔ | ✖ | <3,0 |
| onLoadComplete | fonction (numberOfPages, chemin, {largeur, hauteur}, tableContents) | nul | rappel lorsque le chargement du PDF est terminé, renvoie le nombre total de pages, le chemin local/cache du PDF, {largeur, hauteur} et la table des matières | ✔ | ✔ | ✔ mais sans tableContents | <3,0 |
| surPageChanged | fonction (page, nombre de pages) | nul | rappel lorsque la page a changé, renvoie la page actuelle et le nombre total de pages | ✔ | ✔ | ✔ | <3,0 |
| surErreur | fonction (erreur) | nul | rappel lorsqu'une erreur s'est produite | ✔ | ✔ | ✔ | <3,0 |
| surPageSingleTap | fonction(page) | nul | rappel lorsque la page a été appuyée une seule fois | ✔ | ✔ | ✔ | 3.0 |
| surÉchelleChanged | fonction (échelle) | nul | rappel lors de la mise à l'échelle de la page | ✔ | ✔ | ✔ | 3.0 |
| surPressLink | fonction (uri) | nul | rappel lorsque le lien est cliqué | ✔ | ✔ | ✖ | 6.0.0 |
| paramètre | Description | défaut | IOS | Androïde | Fenêtres |
|---|---|---|---|---|---|
| uri | source pdf, voir ce qui suit pour plus de détails. | requis | ✔ | ✔ | ✔ |
| cache | utiliser le cache ou pas | FAUX | ✔ | ✔ | ✖ |
| NomFichierCache | nom de fichier spécifique pour le fichier pdf mis en cache | Résultat SHA1(uri) | ✔ | ✔ | ✖ |
| expiration | le fichier de cache a expiré en secondes (0 n'est pas expiré) | 0 | ✔ | ✔ | ✖ |
| méthode | méthode de requête lorsque uri est une URL | "OBTENIR" | ✔ | ✔ | ✖ |
| en-têtes | demander des en-têtes lorsque l'uri est une URL | {} | ✔ | ✔ | ✖ |
| Usage | Description | IOS | Androïde | Fenêtres |
|---|---|---|---|---|
{uri:"http://xxx/xxx.pdf"} | charger un pdf à partir d'une URL | ✔ | ✔ | ✔ |
{require("./test.pdf")} | charger le pdf concerne le fichier js (pas besoin d'être ajouté par xcode) | ✔ | ✖ | ✖ |
{uri:"bundle-assets://path/to/xxx.pdf"} | chargez le pdf à partir des actifs, le fichier doit se trouver dans android/app/src/main/assets/path/to/xxx.pdf | ✖ | ✔ | ✖ |
{uri:"bundle-assets://xxx.pdf"} | chargez le pdf à partir des actifs, vous devez ajouter le pdf au projet par xcode. cela ne prend pas en charge le dossier. | ✔ | ✖ | ✖ |
{uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."} | charger le pdf à partir de la chaîne base64 | ✔ | ✔ | ✔ |
{uri:"file:///absolute/path/to/xxx.pdf"} | charger le pdf à partir du système de fichiers local | ✔ | ✔ | ✔ |
{uri:"ms-appx:///xxx.pdf"}} | charger le pdf fourni avec l'application UWP | ✖ | ✖ | ✔ |
{uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"} | charger le pdf à partir de l'URI du contenu | ✔* | ✖ | ✖ |
{uri:"blob:xxxxxxxx-...?offset=0&size=xxx"} | charger le pdf à partir de l'URL du blob | ✖ | ✔ | ✖ |
*) nécessite la création de React Native à partir des sources avec ce patch
Les méthodes fonctionnent sur une référence à l’é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
