react native render pdf
v1.0.12
Um componente de visualização nativa em pdf nativo de alto desempenho e recurso Rich React escrito em Obj-C ++ para iOS, Kotlin para Android e C ++ para Windows
Usamos react-native-blob-util para lidar
A tabela abaixo mostra as versões suportadas do React Native e React-native-Blob-Util para diferentes versões de
react-native-render-pdf.
| Reagir nativo | 0,57+ |
|---|---|
| React-native-render-PDF | 1.0.0+ |
| React-nativo-blob-Util | 0,13,7+ |
Expo: Este pacote não está disponível no aplicativo Expo Go. Aprenda como você pode usar este pacote em clientes de dev personalizados por meio do plug-in de configuração Expo Expo. Exemplo:
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-utilEm seguida, siga as instruções da sua plataforma para vincular a render-render-render-PDF no seu projeto:
Reaja nativo 0,60 e acima
Execute pod install no diretório ios . A ligação não é necessária no React Native 0.60 e acima.
Reaja nativo 0,59 e abaixo
react-native link react-native-blob-util
react-native link react-native-render-pdf** Adicione o seguinte ao seu Android/Build.gradle **
ext {
...
+ kotlinVersion = "1.9.24' // or latest
...
}Se você usar o RN 0.59.0 e acima , adicione o seguinte ao seu 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'
+ }
}Reaja nativo 0,59.0 e abaixo
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 e em projetos de soluçãoRCTPdf e ReactNativeBlobUtilpch.h adicione #include "winrt/RCTPdf.h"#include "winrt/ReactNativeBlobUtil.h"App.cpp Add PackageProviders().Append(winrt::progress_view::ReactPackageProvider()); antes do InitializeComponent();PackageProviders().Append(winrt::RCTPdf::ReactPackageProvider()); e PackageProviders().Append(winrt::ReactNativeBlobUtil::ReactPackageProvider()); Para adicionar um test.pdf como no exemplo add:
<None Include="....test.pdf">
<DeploymentContent>true</DeploymentContent>
</None>
No arquivo app .vcxproj , antes de <None Include="packages.config" /> .
Q1. Após a instalação e a execução, não consigo ver o arquivo PDF.
A1: Talvez você tenha esquecido de escapar react-native link ou não é executado corretamente. Você pode adicioná -lo manualmente. Para detalhes, você pode ver o problema #24 e #2
Q2. Ao executar, ele mostra 'Pdf' has no propType for native prop RCTPdf.acessibilityLabel of native type 'String'
A2. Sua versão react-nativa é muito antiga, atualize-a para 0,47.0+, ver também #39
Q3. Quando executo o aplicativo de exemplo, recebo uma tela branca / cinza / a barra de carregamento não está progredindo.
A3. Verifique seu URI, se você atingir um PDF hospedado em um http precisará fazer o seguinte:
iOS: adicione uma exceção para o servidor que hospeda o PDF no iOS info.plist . Aqui está um exemplo:
<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 que não funciona com a React Native Expo?.
A4. A Expo não suporta módulo nativo. você pode ler mais advertências da exposição here
Q5. Por que não consigo executar o exemplo do iOS? 'Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65.'
A5. Execute os seguintes comandos na pasta do projeto (por exemplo, react-native-render-pdf/example ) para garantir que todas as dependências estejam disponíveis:
yarn install (or npm install)
cd ios
pod install
cd ..
react-native run-ios
[mais]
/**
* 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 ,
} ,
} ) ;| Propriedade | Tipo | Padrão | Descrição | iOS | Android | Windows | FirstreLease |
|---|---|---|---|---|---|---|---|
| fonte | objeto | não nulo | Fonte PDF como {Uri: xxx, cache: false}. Veja o seguinte para obter detalhes. | ✔ | ✔ | ✔ | 1.0.0 |
| página | número | 1 | Índice de página inicial | ✔ | ✔ | ✔ | 1.0.0 |
| escala | número | 1.0 | deve minScale <= escala <= maxscale | ✔ | ✔ | ✔ | 1.0.0 |
| MinScale | número | 1.0 | escala min | ✔ | ✔ | ✔ | 1.0.0 |
| MaxScale | número | 3.0 | escala máxima | ✔ | ✔ | ✔ | 1.0.0 |
| horizontal | bool | falso | Desenhe a direção da página, se você quiser ouvir a mudança de orientação, pode usar o [Locker de reação-orientação] | ✔ | ✔ | ✔ | 1.0.0 |
| ShowShorizontalsCrollIndicator | bool | verdadeiro | mostra ou esconde o indicador de barra de rolagem horizontal no iOS | ✔ | 1.0.0 | ||
| ShowsverticalScrollIndicator | bool | verdadeiro | mostra ou esconde o indicador de barra de rolagem vertical no iOS | ✔ | 1.0.0 | ||
| FitPolicy | número | 2 | 0: Largura de ajuste, 1: altura de ajuste, 2: ajuste ambos (padrão) | ✔ | ✔ | ✔ | 1.0.0 |
| espaçamento | número | 10 | o tamanho do disjuntor entre as páginas | ✔ | ✔ | ✔ | 1.0.0 |
| senha | corda | "" | A senha do PDF, se o erro de senha, ligará para o OnError () com a mensagem "Senha necessária ou senha incorreta". | ✔ | ✔ | ✔ | 1.0.0 |
| estilo | objeto | {BackgroundColor: "#eee"} | Suporte ao estilo de visão normal, você pode usar isso para definir a cor de borda/espaçamento ... | ✔ | ✔ | ✔ | 1.0.0 |
| renderActivityIndicator | (Progresso) => Componente | Quando o carregamento mostra como um indicador, você pode usar seu componente | ✔ | ✔ | ✖ | 1.0.0 | |
| EnableAntialiasing | bool | verdadeiro | Melhore a renderização um pouco em telas de baixa resolução, mas talvez seja um problema no Android 4.4, então adicione um switch | ✖ | ✔ | ✖ | 1.0.0 |
| AtivarPAGING | bool | falso | Mostrar apenas uma página na tela | ✔ | ✔ | ✔ | 1.0.0 |
| enablertl | bool | falso | Página de rolagem como "página3, página2, página1" | ✔ | ✖ | ✔ | 1.0.0 |
| EnableanNoTationRandering | bool | verdadeiro | Ativar anotação de renderização, aviso: o iOS suporta apenas a configuração inicial, não suporta a mudança em tempo real | ✔ | ✔ | ✖ | 1.0.0 |
| TrustAllCerts | bool | verdadeiro | Permitir conexões com servidores com certificação autoassinada | ✔ | ✔ | ✖ | 1.0.0 |
| Página única | bool | falso | Mostrar apenas a primeira página, útil para visualizações de miniatura | ✔ | ✔ | ✔ | 1.0.0 |
| OnloadProgress | função (porcentagem) | nulo | Retorno de chamada ao carregar, retorne o progresso do carregamento (0-1) | ✔ | ✔ | ✖ | 1.0.0 |
| OnLoadComplete | função (númerofPages, caminho, {largura, altura}, comprimidos) | nulo | Retorno de chamada Quando o carregamento em PDF foi concluído, retorne a contagem total de páginas, o caminho local/cache local, {largura, altura} e índice | ✔ | ✔ | ✔ Mas sem consultas de mesa | 1.0.0 |
| OnPagechanged | função (página, númerofpages) | nulo | retorno de chamada quando a página foi alterada, retorne a página atual e a contagem total da página | ✔ | ✔ | ✔ | 1.0.0 |
| OnError | função (erro) | nulo | retorno de chamada quando o erro aconteceu | ✔ | ✔ | ✔ | 1.0.0 |
| OnPagesingLeTAPAP | função (página) | nulo | retorno de chamada quando a página foi tocada única | ✔ | ✔ | ✔ | 1.0.0 |
| OnScalechanged | função (escala) | nulo | Página de chamada quando a escala | ✔ | ✔ | ✔ | 1.0.0 |
| OnPressLink | função (URI) | nulo | retorno de chamada quando o link tocou | ✔ | ✔ | ✖ | 1.0.0 |
| parâmetro | Descrição | padrão | iOS | Android | Windows |
|---|---|---|---|---|---|
| Uri | Fonte do PDF, consulte o Floring para obter detalhes. | obrigatório | ✔ | ✔ | ✔ |
| cache | Use cache ou não | falso | ✔ | ✔ | ✖ |
| Cachefilename | Nome do arquivo específico para arquivo PDF em cache | MD5 (URI) Resultado | ✔ | ✔ | ✖ |
| expiração | Arquivo de cache Segundos expirados (0 não está expirado) | 0 | ✔ | ✔ | ✖ |
| método | Método de solicitação quando o URI é um URL | "PEGAR" | ✔ | ✔ | ✖ |
| cabeçalhos | Solicite cabeçalhos quando o URI é um URL | {} | ✔ | ✔ | ✖ |
| Uso | Descrição | iOS | Android | Windows |
|---|---|---|---|---|
{uri:"http://xxx/xxx.pdf"} | Carregue PDF de um URL | ✔ | ✔ | ✔ |
{require("./test.pdf")} | Carregar PDF relacionado ao arquivo JS (não precisa adicionar pelo xcode) | ✔ | ✖ | ✖ |
{uri:"bundle-assets://path/to/xxx.pdf"} | Carregar PDF de ativos, o arquivo deve estar no Android/App/Src/Main/Assets/Path/para/xxx.pdf | ✖ | ✔ | ✖ |
{uri:"bundle-assets://xxx.pdf"} | Carregue PDF de ativos, você deve adicionar PDF para projetar pelo Xcode. Isso não suporta a pasta. | ✔ | ✖ | ✖ |
{uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."} | Carregue pdf da string base64 | ✔ | ✔ | ✔ |
{uri:"file:///absolute/path/to/xxx.pdf"} | Carregue PDF do sistema de arquivos local | ✔ | ✔ | ✔ |
{uri:"ms-appx:///xxx.pdf"}} | Carregar PDF agrupado com aplicativo UWP | ✖ | ✖ | ✔ |
{uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"} | Carregue pdf do conteúdo URI | ✔* | ✖ | ✖ |
{uri:"blob:xxxxxxxx-...?offset=0&size=xxx"} | Carregue PDF do URL do BLOB | ✖ | ✔ | ✖ |
*) requer a construção de reação nativa da fonte com este patch
Os métodos operam em um REF para o elemento PDF. Você pode obter um árbitro com o seguinte código:
return (
<Pdf
ref={(pdf) => { this.pdf = pdf; }}
source={source}
...
/>
);
setPage(pageNumber)
Defina a página atual do componente PDF. Pagenumber é um número inteiro positivo. Se Pagenumber> NumberOfPages, a página atual não será alterada.
Exemplo:
this.pdf.setPage(42); // Display the answer to the Ultimate Question of Life, the Universe, and Everything
