react native render pdf
v1.0.12
Un componente PDF Native PDF de alto rendimiento y características Rich React escrita en OBJ-C ++ para iOS, Kotlin para Android y C ++ para Windows
Utilizamos react-native-blob-util para manejar el acceso al sistema de archivos en este paquete, por lo que debe instalar react-nativo-render-pdf y react-native-blob-uTil
La siguiente tabla muestra las versiones compatibles de React Native y React-Native-Blob-Util para diferentes versiones de
react-native-render-pdf.
| Reaccionar nativo | 0.57+ |
|---|---|
| react-nativo-render-pdf | 1.0.0+ |
| react-nativo-blob-uTil | 0.13.7+ |
Expo: este paquete no está disponible en la aplicación Expo Go. Aprenda cómo puede usar este paquete en clientes de desarrollo personalizados a través del complemento de configuración Expo fuera del árbol. Ejemplo:
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-utilLuego siga las instrucciones de su plataforma para vincular react-nativo-render-pdf en su proyecto:
React Native 0.60 y superior
Ejecute pod install en el directorio ios . No se requiere vinculación en React Native 0.60 y superior.
React Native 0.59 y abajo
react-native link react-native-blob-util
react-native link react-native-render-pdf** Agregue siguiendo a su Android/Build.gradle **
ext {
...
+ kotlinVersion = "1.9.24' // or latest
...
}Si usa RN 0.59.0 y superior , agregue siguiendo su 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 y abajo
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 y en proyectos de solucionesRCTPdf y ReactNativeBlobUtilpch.h Agregar #include "winrt/RCTPdf.h"#include "winrt/ReactNativeBlobUtil.h"App.cpp agregar PackageProviders().Append(winrt::progress_view::ReactPackageProvider()); antes de InitializeComponent();PackageProviders().Append(winrt::RCTPdf::ReactPackageProvider()); y PackageProviders().Append(winrt::ReactNativeBlobUtil::ReactPackageProvider()); Para agregar un test.pdf como en el ejemplo Agregar:
<None Include="....test.pdf">
<DeploymentContent>true</DeploymentContent>
</None>
En el archivo App .vcxproj , antes <None Include="packages.config" /> .
Q1. Después de la instalación y la ejecución, no puedo ver el archivo PDF.
A1: Tal vez olvidó excutar react-native link o no se ejecuta correctamente. Puedes agregarlo manualmente. Para detalles puede ver el problema #24 y #2
Q2. Cuando se ejecuta, muestra 'Pdf' has no propType for native prop RCTPdf.acessibilityLabel of native type 'String'
A2. Su versión react-nativa es demasiado antigua, actualíquela a 0.47.0+ ver también #39
Q3. Cuando ejecuto la aplicación de ejemplo, obtengo una pantalla blanca / gris / la barra de carga no está progresando.
A3. Verifique su URI, si presiona un PDF que está alojado en un http deberá hacer lo siguiente:
iOS: Agregue una excepción para el servidor que aloja el PDF en iOS info.plist . Aquí hay un ejemplo:
<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. ¿Por qué no funciona con React Native Expo?.
A4. Expo no admite el módulo nativo. Puedes leer más advertencias de exposición here
Q5. ¿Por qué no puedo ejecutar el ejemplo de iOS? 'Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65.'
A5. Ejecute los siguientes comandos en la carpeta del proyecto (por ejemplo react-native-render-pdf/example ) para garantizar que todas las dependencias estén disponibles:
yarn install (or npm install)
cd ios
pod install
cd ..
react-native run-ios
[más]
/**
* 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 ,
} ,
} ) ;| Propiedad | Tipo | Por defecto | Descripción | iOS | Androide | Windows | Firstrelease |
|---|---|---|---|---|---|---|---|
| fuente | objeto | no nulo | Fuente pdf como {uri: xxx, caché: falso}. Vea lo siguiente para obtener detalles. | ✔ | ✔ | ✔ | 1.0.0 |
| página | número | 1 | índice de página inicial | ✔ | ✔ | ✔ | 1.0.0 |
| escala | número | 1.0 | Debería minscale <= escala <= maxscale | ✔ | ✔ | ✔ | 1.0.0 |
| mínimo | número | 1.0 | escala mínima | ✔ | ✔ | ✔ | 1.0.0 |
| escala máxima | número | 3.0 | escala máxima | ✔ | ✔ | ✔ | 1.0.0 |
| horizontal | bool | FALSO | Dibuje la dirección de la página, si desea escuchar el cambio de orientación, puede usar [Locker de orientación react-nación] | ✔ | ✔ | ✔ | 1.0.0 |
| showshorizontalscrollindicator | bool | verdadero | muestra o esconde el indicador de la barra de desplazamiento horizontal en iOS | ✔ | 1.0.0 | ||
| showsvericalScrollIndicator | bool | verdadero | muestra o oculta el indicador de la barra de desplazamiento vertical en iOS | ✔ | 1.0.0 | ||
| FitPolicy | número | 2 | 0: Ancho de ajuste, 1: altura de ajuste, 2: ajuste ambos (predeterminado) | ✔ | ✔ | ✔ | 1.0.0 |
| espaciado | número | 10 | el tamaño del interruptor entre páginas | ✔ | ✔ | ✔ | 1.0.0 |
| contraseña | cadena | " | La contraseña PDF, si el error de contraseña, llamará a OnError () con el mensaje "Contraseña requerida o contraseña incorrecta". | ✔ | ✔ | ✔ | 1.0.0 |
| estilo | objeto | {backgroundColor: "#eee"} | Apoya el estilo de vista normal, puede usar esto para establecer el color del borde/espaciado ... | ✔ | ✔ | ✔ | 1.0.0 |
| RenderActivity Indicator | (progreso) => componente | Al cargarlo, mostrarlo como un indicador, puede usar su componente | ✔ | ✔ | ✖ | 1.0.0 | |
| habilitación | bool | verdadero | Mejorar un poco en las pantallas de baja resolución, pero tal vez tenga algún problema en Android 4.4, así que agregue un interruptor | ✖ | ✔ | ✖ | 1.0.0 |
| Habilitar | bool | FALSO | Solo muestra una página en la pantalla | ✔ | ✔ | ✔ | 1.0.0 |
| habilitar | bool | FALSO | Página de desplazamiento como "Página3, página2, página1" | ✔ | ✖ | ✔ | 1.0.0 |
| habilitado | bool | verdadero | Habilitar anotación de representación, aviso: iOS solo admite la configuración inicial, no admite el cambio de tiempo real | ✔ | ✔ | ✖ | 1.0.0 |
| TrustAllcerts | bool | verdadero | Permitir conexiones a servidores con certificación autofirmada | ✔ | ✔ | ✖ | 1.0.0 |
| sencillo | bool | FALSO | Solo muestre la primera página, útil para las vistas de miniatura | ✔ | ✔ | ✔ | 1.0.0 |
| OnloadProgress | función (porcentaje) | nulo | devolución de llamada Al cargar, devolver el progreso de carga (0-1) | ✔ | ✔ | ✖ | 1.0.0 |
| OnloadComplete | función (numberOfPages, ruta, {ancho, altura}, TableContents) | nulo | devolución de llamada Cuando la carga PDF se completó, devuelve el recuento total de páginas, ruta local/caché PDF, {ancho, altura} y tabla de contenido | ✔ | ✔ | ✔ Pero sin tabletas | 1.0.0 |
| onpagechanged | función (página, número de páginas) | nulo | devolución de llamada Cuando cambió la página, devuelve la página actual y el recuento total de la página | ✔ | ✔ | ✔ | 1.0.0 |
| onderror | función (error) | nulo | devolución de llamada cuando ocurrió un error | ✔ | ✔ | ✔ | 1.0.0 |
| onpagesingletap | función (página) | nulo | devolución de llamada cuando la página fue tocada soltera | ✔ | ✔ | ✔ | 1.0.0 |
| en escalado | función (escala) | nulo | devolución de llamada cuando la página de escala | ✔ | ✔ | ✔ | 1.0.0 |
| OnPresslink | función (uri) | nulo | devolución de llamada cuando el enlace intervino | ✔ | ✔ | ✖ | 1.0.0 |
| parámetro | Descripción | por defecto | iOS | Androide | Windows |
|---|---|---|---|---|---|
| uri | Fuente de PDF, consulte el Forling para obtener detalles. | requerido | ✔ | ✔ | ✔ |
| cache | usa caché o no | FALSO | ✔ | ✔ | ✖ |
| nombre de tacileo | Nombre de archivo específico para el archivo PDF en caché | Resultado de MD5 (URI) | ✔ | ✔ | ✖ |
| vencimiento | El archivo de caché expiró segundos (0 no está caducado) | 0 | ✔ | ✔ | ✖ |
| método | Método de solicitud Cuando URI es una URL | "CONSEGUIR" | ✔ | ✔ | ✖ |
| encabezado | solicitar encabezados cuando URI sea una URL | {} | ✔ | ✔ | ✖ |
| Uso | Descripción | iOS | Androide | Windows |
|---|---|---|---|---|
{uri:"http://xxx/xxx.pdf"} | Cargar PDF desde una URL | ✔ | ✔ | ✔ |
{require("./test.pdf")} | Cargar PDF Relacione con el archivo JS (no necesite agregar por xcode) | ✔ | ✖ | ✖ |
{uri:"bundle-assets://path/to/xxx.pdf"} | Cargar PDF de los activos, el archivo debe estar en Android/App/Src/Main/Assets/Path/To/xxx.pdf | ✖ | ✔ | ✖ |
{uri:"bundle-assets://xxx.pdf"} | Cargue PDF de los activos, debe agregar PDF al proyecto por XCode. Esto no admite la carpeta. | ✔ | ✖ | ✖ |
{uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."} | Cargar PDF desde la cadena Base64 | ✔ | ✔ | ✔ |
{uri:"file:///absolute/path/to/xxx.pdf"} | Cargar PDF desde el sistema de archivos local | ✔ | ✔ | ✔ |
{uri:"ms-appx:///xxx.pdf"}} | Cargar PDF incluido con la aplicación UWP | ✖ | ✖ | ✔ |
{uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"} | Cargar PDF desde el URI de contenido | ✔* | ✖ | ✖ |
{uri:"blob:xxxxxxxx-...?offset=0&size=xxx"} | Cargar PDF de URL de blob | ✖ | ✔ | ✖ |
*) requiere la construcción de reaccionamiento nativo de la fuente con este parche
Los métodos operan en una referencia al elemento PDF. Puede obtener una reflejo con el siguiente código:
return (
<Pdf
ref={(pdf) => { this.pdf = pdf; }}
source={source}
...
/>
);
setPage(pageNumber)
Establezca la página actual del componente PDF. PageNumber es un entero positivo. Si PageNumber> NumberOfPages, la página actual no se cambia.
Ejemplo:
this.pdf.setPage(42); // Display the answer to the Ultimate Question of Life, the Universe, and Everything
