react native render pdf 다운로드 -Rect react native render pdf 소스 코드 다운로드

react native render pdf

기타 소스코드

v1.0.12

다운로드

반응-신용 렌더 PDF

고성능 및 기능 Rich React Native PDF View 구성 요소 iOS 용 OBJ-C ++, Android 용 Kotlin 및 Windows 용 C ++

특징

URL, Blob, 로컬 파일 또는 자산에서 PDF를 읽고 캐시 할 수 있습니다.
수평 또는 수직으로 표시합니다
드래그 앤 줌
줌을 위해 더블 탭
암호 보호 PDF를 지원합니다
PDF의 특정 페이지로 이동하십시오

지원되는 버전

우리는이 패키지의 파일 시스템 액세스를 처리하기 위해 react-native-blob-util 사용하므로 React-Native Render-PDF 및 React-Native-Blob-Util을 설치해야합니다.

아래 표는 다른 버전의 react-native-render-pdf 에 대한 지원되는 RECT 기본 및 React-Native-Blob-util의 지원 버전을 보여줍니다.

원시 반응	0.57+
반응-신용 렌더 PDF	1.0.0+
반응-신용-블로브 유틸	0.13.7+

Expo :이 패키지는 Expo Go 앱에서 사용할 수 없습니다. 트리 외 엑스포 구성 플러그인을 통해 Custom Dev 클라이언트 에서이 패키지를 사용하는 방법에 대해 알아보십시오. 예 : 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

그런 다음 플랫폼에 대한 지침을 따르십시오.

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/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 )
솔루션 탐색기에서 솔루션 아이콘을 마우스 오른쪽 버튼으로 클릭하십시오> 추가> 기존 프로젝트 ...
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" /> 이전.

FAQ

FAQ 세부 사항

Q1. 설치 및 실행 후 PDF 파일을 볼 수 없습니다.
A1 : 아마도 react-native link 강화하는 것을 잊어 버렸거나 올바르게 실행되지 않습니다. 수동으로 추가 할 수 있습니다. 자세한 내용은 문제 #24 및 #2 볼 수 있습니다.

Q2. 실행할 때 'Pdf' has no propType for native prop RCTPdf.acessibilityLabel of native type 'String'
A2. 귀하의 React-Native 버전이 너무 오래되었으므로 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. Expo는 기본 모듈을 지원하지 않습니다. 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	기계적 인조 인간	창	FIRSTRELEASE
원천	물체	null이 아닙니다	{uri : xxx, cache : false}와 같은 PDF 소스. 자세한 내용은 다음을 참조하십시오.	✔	✔	✔	1.0.0
페이지	숫자	1	초기 페이지 인덱스	✔	✔	✔	1.0.0
규모	숫자	1.0	minscale <= scale <= maxScale이어야합니다	✔	✔	✔	1.0.0
MinScale	숫자	1.0	최소 스케일	✔	✔	✔	1.0.0
맥스 스케일	숫자	3.0	최대 스케일	✔	✔	✔	1.0.0
수평의	부	거짓	페이지 방향 그리기, 오리엔테이션 변경을 듣고 싶다면 [React-Native-Orientation-Locker]를 사용할 수 있습니다.	✔	✔	✔	1.0.0
Showshorizontalscrollindicator	부	진실	iOS에서 수평 스크롤 막대 표시기를 보여 주거나 숨겨	✔			1.0.0
광범위한scrollindicator를 보여줍니다	부	진실	iOS에서 수직 스크롤 막대 표시기를 표시하거나 숨 깁니다.	✔			1.0.0
fitpolicy	숫자	2	0 : 핏 너비, 1 : 핏 높이, 2 : 두 가지 모두 (기본값)	✔	✔	✔	1.0.0
간격	숫자	10	페이지 사이의 차단기 크기	✔	✔	✔	1.0.0
비밀번호	끈	"" "	PDF Password는 비밀번호 오류 인 경우 "비밀번호가 필요하거나 잘못된 비밀번호"메시지가있는 onerror ()를 호출합니다.	✔	✔	✔	1.0.0
스타일	물체	{backgroundColor : "#eee"}	일반보기 스타일을 지원하면 이것을 사용하여 테두리/간격 색상을 설정할 수 있습니다 ...	✔	✔	✔	1.0.0
RenderActivityIndicator	(진행) => 구성 요소		로드하면 표시기로 표시되면 구성 요소를 사용할 수 있습니다.	✔	✔	✖	1.0.0
enableantialiasing	부	진실	저해상도 화면에서 약간의 렌더링을 향상 시키지만 Android 4.4에서 문제가있을 수 있으므로 스위치를 추가하십시오.	✖	✔	✖	1.0.0
활성화	부	거짓	화면에 한 페이지 만 표시합니다	✔	✔	✔	1.0.0
enablertl	부	거짓	"Page3, Page2, Page1"으로 스크롤 페이지	✔	✖	✔	1.0.0
enableAnnotationAtionRendering	부	진실	렌더링 주석 활성화, 주목 : iOS는 초기 설정 만 지원하지 않고 실시간 변경을 지원하지 않습니다.	✔	✔	✖	1.0.0
신뢰할 수 있습니다	부	진실	자체 서명 인증으로 서버에 연결할 수 있습니다	✔	✔	✖	1.0.0
단일 페이지	부	거짓	축소판보기에 유용한 첫 페이지 만 표시하십시오	✔	✔	✔	1.0.0
onloadprogress	기능 (퍼센트)	널	로드시 콜백, 반환 로딩 진행 (0-1)	✔	✔	✖	1.0.0
onloadcomplete	함수 (NumberOfPages, Path, {너비, 높이}, 식탁보)	널	콜백 PDF로드가 완료되면 총 페이지 수, PDF 로컬/캐시 경로, {너비, 높이} 및 목차 테이블	✔	✔	✔하지만 식탁보가 없습니다	1.0.0
onpagechanged	함수 (페이지, 숫자 에피지)	널	페이지가 변경되면 콜백 현재 페이지 및 총 페이지 수 반환	✔	✔	✔	1.0.0
오류	함수 (오류)	널	오류가 발생했을 때 콜백	✔	✔	✔	1.0.0
onpagesingletap	기능 (페이지)	널	콜백 페이지가 단일 탭으로 묶었을 때 콜백	✔	✔	✔	1.0.0
onscalechanged	기능 (스케일)	널	스케일 페이지시 콜백	✔	✔	✔	1.0.0
onpresslink	기능 (URI)	널	링크가 탭 될 때 콜백	✔	✔	✖	1.0.0

소스의 매개 변수

매개 변수	설명	기본	iOS	기계적 인조 인간	창
우리	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/main/assets/path/to/xxx.pdf에 있어야합니다.	✖	✔	✖
`{uri:"bundle-assets://xxx.pdf"}`	자산에서 PDF를로드하려면 Xcode로 프로젝트에 PDF를 추가해야합니다. 이것은 폴더를 지원하지 않습니다.	✔	✖	✖
`{uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."}`	Base64 String에서 PDF를로드하십시오	✔	✔	✔
`{uri:"file:///absolute/path/to/xxx.pdf"}`	로컬 파일 시스템에서 PDF를로드하십시오	✔	✔	✔
`{uri:"ms-appx:///xxx.pdf"}}`	UWP 앱과 함께 PDF를로드하십시오	✖	✖	✔
`{uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"}`	Content URI에서 PDF를로드하십시오	✔*	✖	✖
`{uri:"blob:xxxxxxxx-...?offset=0&size=xxx"}`	Blob URL에서 PDF를로드하십시오	✖	✔	✖

*)이 패치로 소스에서 React Native를 건축해야합니다.

행동 양식

setPage

메소드는 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 설치

안드로이드 설치

Windows 설치

앱으로 PDF를 번들링합니다

FAQ

예

구성

소스의 매개 변수

source.uri의 유형

행동 양식

setPage ()

파생 된 작품 및 기부금 인정

ComfyUI IC Light Native

PDFBox PDF 처리 클래스 라이브러리 v3.0.0 alpha2

react native

PDF Shaper Pro

PDF Mpjex 앱

오로라 PDF 앱

chat.petals.dev

GPT Prompt Templates

GPTyped

Google Dorks

shepherd

mongo express

Google Dorks

shepherd

mongo express