react native render pdf Unduh - react native render pdf Kode Sumber Unduh

react native render pdf

Kode sumber lainnya

v1.0.12

Unduh

react-native-render-PDF

Komponen tampilan PDF asli Bereaksi tinggi & fitur tinggi yang ditulis dalam OBJ-C ++ untuk iOS, Kotlin untuk Android dan C ++ untuk Windows

Fitur

Baca PDF dari URL, gumpalan, file lokal atau aset dan dapat menemui itu.
Tampilkan secara horizontal atau vertikal
seret dan zoom
Ketuk Double untuk Zoom
mendukung PDF yang dilindungi kata sandi
Lompat ke halaman tertentu di PDF

Versi yang didukung

Kami menggunakan react-native-blob-util untuk menangani akses sistem file dalam paket ini, jadi Anda harus menginstal react-native-render-PDF dan react-native-blob-util

Tabel di bawah ini menunjukkan versi yang didukung dari React Native dan react-native-blob-util untuk versi yang berbeda dari react-native-render-pdf .

Bereaksi asli	0.57+
react-native-render-PDF	1.0.0+
react-native-blob-util	0.13.7+

Expo: Paket ini tidak tersedia di aplikasi Expo Go. Pelajari bagaimana Anda dapat menggunakan paket ini di klien dev khusus melalui plugin konfigurasi Expo Out-of-Tree. Contoh: with-pdf .

Instalasi

 # 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

Kemudian ikuti instruksi untuk platform Anda untuk menautkan react-native-render-PDF ke dalam proyek Anda:

Instalasi iOS

detail iOS

Bereaksi asli 0,60 ke atas

Jalankan pod install di direktori ios . Menghubungkan tidak diperlukan dalam React asli 0,60 ke atas.

Bereaksi asli 0,59 dan di bawah

react-native link react-native-blob-util
react-native link react-native-render-pdf

Instalasi Android

Detail Android

** Tambahkan berikut ke android/build.gradle ** Anda

ext {
  ...
+   kotlinVersion = "1.9.24' // or latest
  ...
}

Jika Anda menggunakan RN 0.59.0 dan di atas , silakan tambahkan berikut ke android/app/build.gradle ** Anda

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'
+     }

   }

Bereaksi asli 0,59,0 dan di bawah

react-native link react-native-blob-util
react-native link react-native-render-pdf

Instalasi Windows

Detail Windows

Buka solusi Anda di Visual Studio 2019 (mis. windowsyourapp.sln )
Ikon Solusi Klik Kanan di Solution Explorer> Tambah> Proyek yang Ada ...
Jika menjalankan RNW 0.62: Tambahkan node_modulesreact-native-render-pdfwindowsRCTPdfRCTPdf.vcxproj
Jika menjalankan RNW 0.62: Tambahkan node_modulesreact-native-blob-utilwindowsReactNativeBlobUtilReactNativeBlobUtil.vcxproj
Klik kanan Proyek Aplikasi Utama> Tambah> Referensi ...
Pilih progress-view dan dalam Proyek Solusi
- Jika menjalankan 0,62, pilih juga RCTPdf dan ReactNativeBlobUtil
Dalam App pch.h Tambahkan #include "winrt/RCTPdf.h"
- Jika menjalankan 0,62, pilih juga #include "winrt/ReactNativeBlobUtil.h"
Di App.cpp add PackageProviders().Append(winrt::progress_view::ReactPackageProvider()); sebelum InitializeComponent();
- Jika menjalankan RNW 0.62, juga tambahkan PackageProviders().Append(winrt::RCTPdf::ReactPackageProvider()); dan PackageProviders().Append(winrt::ReactNativeBlobUtil::ReactPackageProvider());

Bundling PDF dengan aplikasi

Untuk menambahkan test.pdf seperti pada contoh tambahkan:

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

Dalam file aplikasi .vcxproj , sebelum <None Include="packages.config" /> .

FAQ

Detail FAQ

Q1. Setelah instalasi dan berjalan, saya tidak dapat melihat file PDF.
A1: Mungkin Anda lupa untuk mengekstrak react-native link atau tidak berjalan dengan benar. Anda dapat menambahkannya secara manual. Untuk detail Anda dapat melihat masalah #24 dan #2

Q2. Saat berjalan, itu menunjukkan 'Pdf' has no propType for native prop RCTPdf.acessibilityLabel of native type 'String'
A2. Versi asli React Anda terlalu tua, silakan tingkatkan ke 0.47.0+ Lihat juga #39

Q3. Ketika saya menjalankan aplikasi contoh, saya mendapatkan layar putih / abu -abu / bilah pemuatan tidak berkembang.
A3. Periksa URI Anda, jika Anda menekan PDF yang di -host di http Anda harus melakukan hal berikut:

iOS: Tambahkan pengecualian untuk server yang hosting PDF di iOS info.plist . Inilah contohnya:

 <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. Mengapa tidak bekerja dengan React Native Expo?
A4. Expo tidak mendukung modul asli. Anda dapat membaca lebih banyak peringatan Expo here

Q5. Mengapa saya tidak bisa menjalankan contoh iOS? 'Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65.'
A5. Jalankan perintah berikut di folder Proyek (misalnya react-native-render-pdf/example ) untuk memastikan bahwa semua dependensi tersedia:

 yarn install (or npm install)
cd ios
pod install
cd ..
react-native run-ios

[lagi]

Contoh

 /**
 * 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 ,
  } ,
} ) ;

Konfigurasi

Milik	Jenis	Bawaan	Keterangan	iOS	Android	Windows	Firstrelease
sumber	obyek	bukan nol	Sumber PDF seperti {uri: xxx, cache: false}. Lihat yang berikut untuk detail.	✔	✔	✔	1.0.0
halaman	nomor	1	indeks halaman awal	✔	✔	✔	1.0.0
skala	nomor	1.0	Haruskah minScale <= skala <= maxscale	✔	✔	✔	1.0.0
MinScale	nomor	1.0	skala min	✔	✔	✔	1.0.0
MaxScale	nomor	3.0	skala maksimal	✔	✔	✔	1.0.0
horisontal	bool	PALSU	menggambar arah halaman, jika Anda ingin mendengarkan perubahan orientasi, Anda dapat menggunakan [react-native-orientation-locker]	✔	✔	✔	1.0.0
showshorizontalscrollindicator	bool	BENAR	menunjukkan atau menyembunyikan indikator batang gulir horizontal di iOS	✔			1.0.0
ShowVerticalScrollIndicator	bool	BENAR	menunjukkan atau menyembunyikan indikator batang gulir vertikal di iOS	✔			1.0.0
Fitpolicy	nomor	2	0: Width Fit, 1: Fit Height, 2: Fit keduanya (default)	✔	✔	✔	1.0.0
jarak	nomor	10	Ukuran pemecah antar halaman	✔	✔	✔	1.0.0
kata sandi	rangkaian	""	Kata sandi PDF, jika kesalahan kata sandi, akan menghubungi onError () dengan pesan "kata sandi diperlukan atau kata sandi yang salah."	✔	✔	✔	1.0.0
gaya	obyek	{BackgroundColor: "#eee"}	Dukung gaya tampilan normal, Anda dapat menggunakan ini untuk mengatur warna perbatasan/jarak ...	✔	✔	✔	1.0.0
RenderactivityIndicator	(progress) => komponen		Saat memuat, tunjukkan sebagai indikator, Anda dapat menggunakan komponen Anda	✔	✔	✖	1.0.0
EnableAntialiasing	bool	BENAR	Tingkatkan rendering sedikit di layar beresolusi rendah, tapi mungkin tentu saja beberapa masalah di Android 4.4, jadi tambahkan sakelar	✖	✔	✖	1.0.0
enablePaging	bool	PALSU	Hanya tampilkan satu halaman di layar	✔	✔	✔	1.0.0
enablertl	bool	PALSU	Halaman gulir sebagai "Page3, Page2, Page1"	✔	✖	✔	1.0.0
enableannotationrendering	bool	BENAR	Aktifkan anotasi rendering, perhatikan: iOS hanya mendukung pengaturan awal, tidak mendukung perubahan waktu nyata	✔	✔	✖	1.0.0
trustAllcerts	bool	BENAR	Izinkan koneksi ke server dengan sertifikasi yang ditandatangani sendiri	✔	✔	✖	1.0.0
Singlepage	bool	PALSU	Hanya tampilkan halaman pertama, berguna untuk tampilan thumbnail	✔	✔	✔	1.0.0
Onloadprogress	fungsi (persen)	batal	Callback saat memuat, kembalikan kemajuan pemuatan (0-1)	✔	✔	✖	1.0.0
OnloadComplete	fungsi (numberofpages, path, {width, height}, tableContents)	batal	Callback Saat PDF Load selesai, kembalikan jumlah halaman total, PDF Local/Cache Path, {Width, Height} dan Daftar Isi	✔	✔	✔ Tapi tanpa konteksonen	1.0.0
Onpagechanged	fungsi (halaman, numberofpages)	batal	panggilan balik saat halaman diubah, kembalikan halaman saat ini dan jumlah halaman total	✔	✔	✔	1.0.0
Onerror	fungsi (kesalahan)	batal	panggilan balik saat kesalahan terjadi	✔	✔	✔	1.0.0
OnpageSingLeTap	fungsi (halaman)	batal	Callback saat halaman disadap tunggal	✔	✔	✔	1.0.0
onScalechanged	fungsi (skala)	batal	panggilan balik saat halaman skala	✔	✔	✔	1.0.0
Onpresslink	Fungsi (URI)	batal	panggilan balik saat tautan disadap	✔	✔	✖	1.0.0

parameter sumber

parameter	Keterangan	bawaan	iOS	Android	Windows
Uri	Sumber PDF, lihat keabadian untuk detail.	diperlukan	✔	✔	✔
cache	Gunakan cache atau tidak	PALSU	✔	✔	✖
Cachefilename	Nama file tertentu untuk file PDF yang di -cache	Hasil MD5 (URI)	✔	✔	✖
kedaluwarsa	File cache kedaluwarsa detik (0 tidak kedaluwarsa)	0	✔	✔	✖
metode	Metode permintaan saat URI adalah URL	"MENDAPATKAN"	✔	✔	✖
header	meminta header saat URI adalah URL	{}	✔	✔	✖

jenis sumber.uri

Penggunaan	Keterangan	iOS	Android	Windows
`{uri:"http://xxx/xxx.pdf"}`	Muat PDF dari URL	✔	✔	✔
`{require("./test.pdf")}`	Muat pdf berhubungan dengan file js (tidak perlu tambahkan oleh xcode)	✔	✖	✖
`{uri:"bundle-assets://path/to/xxx.pdf"}`	Muat pdf dari aset, file harus di android/app/src/main/aset/path/to/xxx.pdf	✖	✔	✖
`{uri:"bundle-assets://xxx.pdf"}`	Muat PDF dari aset, Anda harus menambahkan PDF ke Project by Xcode. Ini tidak mendukung folder.	✔	✖	✖
`{uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."}`	Muat pdf dari string base64	✔	✔	✔
`{uri:"file:///absolute/path/to/xxx.pdf"}`	Muat PDF dari sistem file lokal	✔	✔	✔
`{uri:"ms-appx:///xxx.pdf"}}`	Muat pdf yang dibundel dengan aplikasi UWP	✖	✖	✔
`{uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"}`	Muat PDF dari konten URI	✔*	✖	✖
`{uri:"blob:xxxxxxxx-...?offset=0&size=xxx"}`	Muat PDF dari URL Blob	✖	✔	✖

*) Membutuhkan bangunan bereaksi asli dari sumber dengan tambalan ini

Metode

setPage

Metode beroperasi pada ref ke elemen PDF. Anda bisa mendapatkan referensi dengan kode berikut:

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

setPage ()

setPage(pageNumber)

Atur halaman saat ini dari komponen PDF. Pagenumber adalah bilangan bulat positif. Jika Pagenumber> NumberOfpages, halaman saat ini tidak diubah.

Contoh:

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

Pengakuan Pekerjaan dan Kontribusi yang Diturunkan

Berdasarkan karya asli oleh WonDay React-native-PDF
Mengimplementasikan pustaka react-native-blob-util untuk akses sistem file
Mengimplementasikan perpustakaan Android-PDFView Fork untuk Android oleh Infomaniak
Mengimplementasikan garpu pdfiumandroid oleh infomaniak

Memperluas

Informasi Tambahan

Versi v1.0.12
Tipe Kode sumber lainnya
Waktu Pembaruan 2025-05-21
ukuran 179.68KB
Berasal dari Github

Aplikasi Terkait

ComfyUI IC Light Native

2024-11-15
Perpustakaan kelas pemrosesan PDF PDFBox v3.0.0 alpha2

2024-11-14
react native

2024-11-14
PDF Shaper Pro

2024-11-06
Aplikasi PDF Mpjex

2023-07-05
Aplikasi Aurora PDF

2023-05-19

Direkomendasikan untuk Anda

chat.petals.dev

Kode sumber lainnya

1.0.0
GPT Prompt Templates

Kode sumber lainnya

1.0.0
GPTyped

Kode sumber lainnya

GPTyped 1.0.5
Google Dorks

Kode sumber lainnya

1.0
shepherd

Kode sumber lainnya

v6.1.6-react-shepherd: Prepare Release (#3063)
mongo express

Kode sumber lainnya

v1.1.0-rc-3
Google Dorks

Kode sumber lainnya

1.0
shepherd

Kode sumber lainnya

v6.1.6-react-shepherd: Prepare Release (#3063)
mongo express

Kode sumber lainnya

v1.1.0-rc-3

Informasi Terkait Semua