Skip to content

xcarpentier/rn-pdf-reader-js

Repository files navigation

PDF Reader

Android support πŸš€





npm version npm downloads

Read a PDF just with JS (no native libs needed)

Requirements

  • πŸ‘‰Install react-native-webview on your own!
  • πŸ‘‰Install expo-file-system on your own!
  • πŸ‘‰Install expo-constants on your own!
  • Use it into Expo app (from expo client, Standalone app or ExpoKit app).
  • Only React-Native 0.59-0.60+ support, Expo SDK 33-36+

PRs are welcome...

Example

import * as React from 'react' import { View } from 'react-native' import PDFReader from 'rn-pdf-reader-js' export default class App extends React.Component { render() { return ( <PDFReader source={{ uri: 'http://gahp.net/wp-content/uploads/2017/09/sample.pdf', }} /> ) } }

See more detailed example into App.tsx file.

Props

interface Source { uri?: string // can be local or served on the web (ie. start with `https://` or `file://`) base64?: string // should start with `data:application/pdf;base64,`. A base64 encoded pdf file tends to start with `JVBERi0xL` so your complete string should look something like this: `data:application/pdf;base64,JVBERi0xL...` headers?: { [key: string]: string } } interface Props { source: Source style?: View['props']['style'] // style props to override default container style webviewStyle?: WebView['props']['style'] // style props to override default WebView style webviewProps?: WebView['props'] noLoader?: boolean useGoogleReader?: boolean // If you are not worried about confidentiality withScroll?: boolean // Can cause performance issue withPinchZoom?: boolean customStyle?: { readerContainer?: CSS.Properties readerContainerDocument?: CSS.Properties readerContainerNumbers?: CSS.Properties readerContainerNumbersContent?: CSS.Properties readerContainerZoomContainer?: CSS.Properties readerContainerZoomContainerButton?: CSS.Properties readerContainerNavigate?: CSS.Properties readerContainerNavigateArrow?: CSS.Properties } onLoad?(): void // callback that runs after WebView is loaded onLoadEnd?(): void // callback that runs after WebView is loaded onError?(): void // callback that runs when WebView is on error }

Possibilities

Render type Platform Source prop
Custom PDF reader Android uri or base64
Direct from WebView iOS uri or base64
Google PDF Reader Android, iOS uri

What rn-pdf-reader-js use?

  • react-pdf (pdf.js)
  • WebView
  • Base64

FAQ

Hire an expert!

Looking for a ReactNative freelance expert with more than 12 years experience? Contact me from myΒ website!

About

πŸ“„ PDF reader in JavaScript only for Expo - Android & iOS capable

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published

Contributors 17