react native render pdf下载 - react native render pdf源代码下载

react native render pdf

其他源码

v1.0.12

下载

反应呈渲染pdf

高性能和功能丰富的React本机PDF视图组件用OBJ-C ++编写的iOS，kotlin for Android和Windows的C ++

特征

从URL，BLOB，本地文件或资产中读取PDF，并可以缓存。
水平或垂直显示
拖动和变焦
双击缩放
支持密码保护PDF
跳到PDF中的特定页面

支持版本

我们使用react-native-blob-util来处理此软件包中的文件系统访问

下表显示了不同版本的反应呈现react-native-render-pdf天然和反应本机式餐具的支持版本。

反应天然	0.57+
反应呈渲染pdf	1.0.0+
反应本地式 - 乌蒂	0.13.7+

博览会：该软件包在Expo Go应用程序中不可用。了解如何通过脱离树的Expo Config插件在自定义开发客户端中使用此软件包。示例： 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-native-render-PDF链接到您的项目中：

iOS安装

iOS详细信息

反应天然0.60及以上

在ios目录中运行pod install 。 React Native 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 ）
右键单击解决方案探索器中的解决方案图标> add>现有项目...
如果运行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 ，例如在示例中添加：

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

在app .vcxproj文件中， <None Include="packages.config" /> 。

常问问题

常见问题解答详细信息

Q1。安装和运行后，我看不到PDF文件。
A1：也许您忘记了对react-native link进行辩护，或者它无法正确运行。您可以手动添加它。有关详细信息，您可以看到问题#24和#2

Q2。运行时，它显示'Pdf' has no propType for native prop RCTPdf.acessibilityLabel of native type 'String'
A2。您的反应新版本太老了，请升级为0.47.0+，另请参见#39

Q3。当我运行示例应用程序时，我会得到白色 /灰色屏幕 /加载条没有进展。
A3。检查您的URI，如果您击中了在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。博览会不支持本地模块。您可以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	安卓	视窗	firstrease
来源	目的	不是零	pdf源，例如{uri：xxx，cache：false}。有关详细信息，请参见以下内容。	✔	✔	✔	1.0.0
页	数字	1	初始页面索引	✔	✔	✔	1.0.0
规模	数字	1.0	应该是minscale <=比例<= maxScale	✔	✔	✔	1.0.0
Minscale	数字	1.0	最小比例	✔	✔	✔	1.0.0
MaxScale	数字	3.0	最大比例	✔	✔	✔	1.0.0
水平的	布尔	错误的	绘制页面方向，如果要聆听方向更改，则可以使用[React-Native-nistrientation-Locker]	✔	✔	✔	1.0.0
ShowShorizontalsCrollindicator	布尔	真的	在iOS上显示或隐藏水平滚动条指示器	✔			1.0.0
显示crollindicator	布尔	真的	在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
渲染性调节器	（进度）=>组件		当加载作为指示器显示时，您可以使用组件	✔	✔	✖	1.0.0
启示性	布尔	真的	在低分辨率屏幕上改善渲染一点，但也许在Android 4.4上有一些问题，因此请添加一个开关	✖	✔	✖	1.0.0
启用	布尔	错误的	仅在屏幕上显示一页	✔	✔	✔	1.0.0
enableertl	布尔	错误的	滚动页面为“ 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	函数（numberOfpages，路径，{width，height}，tablecontents）	无效的	PDF负载完成后，回调，返回总页数，PDF Local/Cache Path，{width，Height}和目录表	✔	✔	✔但没有汤匙	1.0.0
Onpagechanged	功能（页面，编号页）	无效的	页面更改时回调，返回当前页面和总页数计数	✔	✔	✔	1.0.0
Onerror	功能（错误）	无效的	发生错误时回调	✔	✔	✔	1.0.0
OnPagesingLeTap	功能（页面）	无效的	单身敲击时回调	✔	✔	✔	1.0.0
在Scalechanged上	功能（比例）	无效的	比例页面时回调	✔	✔	✔	1.0.0
OnPressLink	功能（URI）	无效的	链接点击时回调	✔	✔	✖	1.0.0

来源的参数

范围	描述	默认	ios	安卓	视窗
Uri	PDF源，请参阅详细信息。	必需的	✔	✔	✔
缓存	使用是否使用缓存	错误的	✔	✔	✖
cachefilename	缓存PDF文件的特定文件名	MD5（URI）结果	✔	✔	✖
到期	缓存文件过期的秒（0未过期）	0	✔	✔	✖
方法	URI是URL的请求方法	“得到”	✔	✔	✖
标题	uri是URL时请求标题	{}	✔	✔	✖

Source.uri的类型

用法	描述	ios	安卓	视窗
`{uri:"http://xxx/xxx.pdf"}`	从URL加载PDF	✔	✔	✔
`{require("./test.pdf")}`	加载PDF与JS文件有关（不需要添加Xcode）	✔	✖	✖
`{uri:"bundle-assets://path/to/xxx.pdf"}`	从资产加载PDF，该文件应在Android/app/src/src/main/Assets/path/to/xxx.pdf上	✖	✔	✖
`{uri:"bundle-assets://xxx.pdf"}`	从资产加载PDF，您必须将PDF添加到XCode项目中。这不支持文件夹。	✔	✖	✖
`{uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."}`	从base64字符串加载PDF	✔	✔	✔
`{uri:"file:///absolute/path/to/xxx.pdf"}`	从本地文件系统加载PDF	✔	✔	✔
`{uri:"ms-appx:///xxx.pdf"}}`	加载PDF与UWP应用程序捆绑在一起	✖	✖	✔
`{uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"}`	从内容URI加载PDF	✔*	✖	✖
`{uri:"blob:xxxxxxxx-...?offset=0&size=xxx"}`	从Blob URL加载PDF	✖	✔	✖

*）需要使用此补丁的来源建造本机

方法

setpage

方法可在REF上操作到PDF元素。您可以使用以下代码获得参考：

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

setPage（）

setPage(pageNumber)

设置PDF组件的当前页面。 Pagenumber是一个积极的整数。如果Pagenumber> numberOfpages，则没有更改当前页面。

例子：

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

派生的作品和贡献确认

基于Wonday React-native-PDF的原始工作
实现用于文件系统访问的反应本机库库
通过Infomaniak实现Android的Android-Pdfview fork库
通过Infomaniak实现PDFiumandroid叉

展开

附加信息

版本 v1.0.12
类型其他源码
更新时间 2025-05-21
大小 179.68KB
来自于 Github

react native render pdf

反应呈渲染pdf

特征

支持版本

安装

iOS安装

Android安装

Windows安装

将PDF与应用程序捆绑在一起

常问问题

例子

配置

来源的参数

Source.uri的类型

方法

setPage（）

派生的作品和贡献确认

ComfyUI IC Light Native

PDFBox PDF处理类库 v3.0.0 alpha2

react native

PDF Shaper Pro

PDF Mpjex 应用程序

极光PDF app

chat.petals.dev

GPT Prompt Templates

GPTyped

Google Dorks

shepherd

mongo express

Google Dorks

shepherd

mongo express