intelllex / react-pdf Goto Github PK

View Code? Open in Web Editor NEW

116.0 4.0 34.0 3.63 MB

Simple and fancy PDF Viewer based on pdf.js 📄⚡️

Home Page: https://intelllex.github.io/react-pdf

JavaScript 85.26% SCSS 14.74%

pdfjs react-pdf pdf-viewer react-pdf-viewer

react-pdf's Introduction

react-pdf

React PDF is a simple and fancy PDF Viewer based on pdf.js

Demo

Progress Bar
Thumbnail sidebar
Toolbox (zoom in, zoom out, page jump, page up, page down)
Search within page

How to install

npm install @intelllex/react-pdf

yarn add @intelllex/react-pdf

How to use

import React from 'react';
import ReactPDF from '@intelllex/react-pdf';

const ExampleReactPDF = () => {
    return (
        <ReactPDF
            url="<PDF_url>"
            showProgressBar
            showToolbox
        />
    )
};
 
export default ExampleReactPDF;

Documentation

React component prop. types:

url
- Type: String
- Required: true
- Description: The URL of PDF Document you want to display.
showProgressBar
- Type: Boolean
- Required: false
- Description: Show progress bar on top when loading PDF Document
showToolbox
- Type: Boolean
- Required: false
- Description: Show the useful toolbox on PDF Pages
onChangePage
- Type: Function
- Required: false
- Description: Callback with page param when changing Page Number
onZoomIn
- Type: Function
- Required: false
- Description: Callback when clicking on Zoom In button
onZoomOut
- Type: Function
- Required: false
- Description: Callback when clicking on Zoom Out button
onProgress
- Type: Function
- Required: false
- Description: Callback with progress param when loading PDF
onToggleThumbnail
- Type: Function
- Required: false
- Description: Callback with isShowThumbSidebar param when toggling Thumbnail sidebar

Contributors

Design by Cellyn Tan, Digital Product Designer at INTELLLEX.
Maintain by Trinh Ngoc Dieu, Software Engineer at INTELLLEX.

License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. Except as contained in this notice, the name of the INTELLLEX HOLDINGS PRIVATE LIMITED shall not be used in advertising or otherwise to promote the sale, use or other dealings in this Software without prior written authorization from INTELLLEX HOLDINGS PRIVATE LIMITED.

react-pdf's People

Contributors

Stargazers

Watchers

react-pdf's Issues

pdf.worker.js locally instead of CDN

hello together, is it possible to load the pdf.worker.js locally instead of
https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.338/pdf.worker.js?

Esignature

Is there any way to implement ESIGN using This module ?

Install with npm error

When I try to install the library with npm, just as the readmy says, I get an incompatibility error.

I already tried to change the version of react and react dom to @16 but still the same.

Thumbnail hiding and putting viewer to container

Hi, how could I hide Thumbnail usage ( onToggleThumbnail={false}, onToggleThumbnail='false' - those variants don't work). Also I've a problem with resolution of Viewer inside my container, pages go lower and slider appears on a whole page, than on a container. Here's what I mean:

As you can see green is my container and I can't figure out how to position viewer and it's elements inside my container without going through the border.

Here's embed using for example:

Here I put viewer inside the container and slider appears in it, not on a browser page. Also viewer slightly went out of the border on the bottom, but that's not a big deal for now.

react warning

Hello, I have a react warning ? so i can't build my app...

./node_modules/pdfjs-dist/build/pdf.js
Critical dependency: require function is used in a way 
in which dependencies cannot be statically extracted   

./node_modules/pdfjs-dist/build/pdf.js
Critical dependency: require function is used in a way 
in which dependencies cannot be statically extracted

Seems impossible to install the lastest version

Looks a great package, but I can't install it.

download the coded and followed the install instructions. Hours later the install failed. Snipped of failed log is below.

15282 info run [email protected] postinstall { code: 0, signal: null }
15283 timing build:run:postinstall:node_modules/@babel/polyfill/node_modules/core-js Completed in 983ms
15284 info run [email protected] postinstall node_modules/webpack/node_modules/uglifyjs-webpack-plugin node lib/post_install.js
15285 info run [email protected] postinstall { code: 0, signal: null }
15286 timing build:run:postinstall:node_modules/babel-plugin-transform-decorators-legacy/node_modules/core-js Completed in 950ms
15287 info run [email protected] postinstall { code: 0, signal: null }
15288 timing build:run:postinstall:node_modules/webpack/node_modules/uglifyjs-webpack-plugin Completed in 181ms
15289 info run [email protected] postinstall { code: 0, signal: null }
15290 timing build:run:postinstall:node_modules/inferno Completed in 3126ms
15291 info run [email protected] postinstall { code: 1, signal: null }
15292 timing reify:rollback:createSparse Completed in 591755ms
15293 timing reify:rollback:retireShallow Completed in 12109ms
15294 timing command:install Completed in 2368676ms
15295 verbose stack Error: command failed
15295 verbose stack at ChildProcess. (C:\Users\Ernest\AppData\Roaming\npm\node_modules\npm\node_modules@npmcli\promise-spawn\index.js:64:27)
15295 verbose stack at ChildProcess.emit (node:events:369:20)
15295 verbose stack at maybeClose (node:internal/child_process:1067:16)
15295 verbose stack at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
15296 verbose pkgid [email protected]
15297 verbose cwd C:\Users\Ernest\Downloads\react-pdf-master_3
15298 verbose Windows_NT 10.0.19042
15299 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Users\Ernest\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "install"
15300 verbose node v15.12.0
15301 verbose npm v7.5.6
15302 error code 1
15303 error path C:\Users\Ernest\Downloads\react-pdf-master_3\node_modules\node-sass
15304 error command failed
15305 error command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js
15306 error Building: C:\Program Files\nodejs\node.exe C:\Users\Ernest\Downloads\react-pdf-master_3\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
15307 error gyp info it worked if it ends with ok
15307 error gyp verb cli [
15307 error gyp verb cli 'C:\Program Files\nodejs\node.exe',
15307 error gyp verb cli 'C:\Users\Ernest\Downloads\react-pdf-master_3\node_modules\node-gyp\bin\node-gyp.js',
15307 error gyp verb cli 'rebuild',
15307 error gyp verb cli '--verbose',
15307 error gyp verb cli '--libsass_ext=',
15307 error gyp verb cli '--libsass_cflags=',
15307 error gyp verb cli '--libsass_ldflags=',
15307 error gyp verb cli '--libsass_library='
15307 error gyp verb cli ]
15307 error gyp info using [email protected]
15307 error gyp info using [email protected] | win32 | x64
15307 error gyp verb command rebuild []
15307 error gyp verb command clean []
15307 error gyp verb clean removing "build" directory
15307 error gyp verb command configure []
15307 error gyp verb check python checking for Python executable "python2" in the PATH
15307 error gyp verb which failed Error: not found: python2
15307 error gyp verb which failed at getNotFoundError (C:\Users\Ernest\Downloads\react-pdf-master_3\node_modules\node-gyp\node_modules\which\which.js:13:12)
15307 error gyp verb which failed at F (C:\Users\Ernest\Downloads\react-pdf-master_3\node_modules\node-gyp\node_modules\which\which.js:68:19)
15307 error gyp verb which failed at E (C:\Users\Ernest\Downloads\react-pdf-master_3\node_modules\node-gyp\node_modules\which\which.js:80:29)
15307 error gyp verb which failed at C:\Users\Ernest\Downloads\react-pdf-master_3\node_modules\node-gyp\node_modules\which\which.js:89:16
15307 error gyp verb which failed at C:\Users\Ernest\Downloads\react-pdf-master_3\node_modules\node-gyp\node_modules\isexe\index.js:42:5
15307 error gyp verb which failed at C:\Users\Ernest\Downloads\react-pdf-master_3\node_modules\node-gyp\node_modules\isexe\windows.js:36:5
15307 error gyp verb which failed at FSReqCallback.oncomplete (node:fs:193:21)
15307 error gyp verb which failed python2 Error: not found: python2
15307 error gyp verb which failed at getNotFoundError (C:\Users\Ernest\Downloads\react-pdf-master_3\node_modules\node-gyp\node_modules\which\which.js:13:12)
15307 error gyp verb which failed at F (C:\Users\Ernest\Downloads\react-pdf-master_3\node_modules\node-gyp\node_modules\which\which.js:68:19)
15307 error gyp verb which failed at E (C:\Users\Ernest\Downloads\react-pdf-master_3\node_modules\node-gyp\node_modules\which\which.js:80:29)
15307 error gyp verb which failed at C:\Users\Ernest\Downloads\react-pdf-master_3\node_modules\node-gyp\node_modules\which\which.js:89:16
15307 error gyp verb which failed at C:\Users\Ernest\Downloads\react-pdf-master_3\node_modules\node-gyp\node_modules\isexe\index.js:42:5
15307 error gyp verb which failed at C:\Users\Ernest\Downloads\react-pdf-master_3\node_modules\node-gyp\node_modules\isexe\windows.js:36:5
15307 error gyp verb which failed at FSReqCallback.oncomplete (node:fs:193:21) {
15307 error gyp verb which failed code: 'ENOENT'
15307 error gyp verb which failed }
15307 error gyp verb check python checking for Python executable "python" in the PATH
15307 error gyp verb which succeeded python C:\Python39\python.EXE
15307 error gyp ERR! configure error
15307 error gyp ERR! stack Error: Command failed: C:\Python39\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
15307 error gyp ERR! stack File "", line 1
15307 error gyp ERR! stack import sys; print "%s.%s.%s" % sys.version_info[:3];
15307 error gyp ERR! stack ^
15307 error gyp ERR! stack SyntaxError: invalid syntax
15307 error gyp ERR! stack
15307 error gyp ERR! stack at ChildProcess.exithandler (node:child_process:326:12)
15307 error gyp ERR! stack at ChildProcess.emit (node:events:369:20)
15307 error gyp ERR! stack at maybeClose (node:internal/child_process:1067:16)
15307 error gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
15307 error gyp ERR! System Windows_NT 10.0.19042
15307 error gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Users\Ernest\Downloads\react-pdf-master_3\node_modules\node-gyp\bin\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
15307 error gyp ERR! cwd C:\Users\Ernest\Downloads\react-pdf-master_3\node_modules\node-sass
15307 error gyp ERR! node -v v15.12.0
15307 error gyp ERR! node-gyp -v v3.8.0
15307 error gyp ERR! not ok
15307 error Build failed with error code: 1
15308 verbose exit 1

Suggestion: Callback when PDF Viewer have loaded successful

maybe it would cool to have a prop like the onProgress but with onSucess Callback, when the PDF Viewer have loaded successfully

How to display annotations in annotation layer

Feature request for "Print" option

Is possible to add a print option in the toolbox?

Support for mobile browsers

Can't view PDFs on mobile/tablet browsers (chrome).

Why does it always open the default PDF

Why does it always open the default pdf, even after I set a different url here:

        <ReactPDF
            url="<my_PDF_url>"
            showProgressBar
            showToolbox
        />

Closing page causes error in PdfPages.componentWillUnmount

I get this error when I navigate away from a page with a ReactPDF component with a PDF loaded:

Uncaught error in http://localhost:3000/static/js/10.chunk.js:61631:26 - Uncaught TypeError: Cannot read property 'pdf' of null TypeError: Cannot read property 'pdf' of null
    at PdfPages.componentWillUnmount (index.js:143)

My code is pretty basic:

<ReactPDF url={doc.uri} showProgressBar showToolbox={this.props.isExpanded} />

The PDF is being shown inside of a well-nested div (think portlet).

Error: Cannot find module './index.scss'

I'm having trouble using this package.

This is the web console log error

modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:232 Uncaught Error: Cannot find module './index.scss'

if I comment this import ReactPDF from "@intelllex/react-pdf"; the error goes away so this let me conclude that the error is is the code.

I'm using react

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.

intelllex / react-pdf Goto Github PK

react-pdf's Introduction

react-pdf

How to install

How to use

Documentation

Contributors

License

react-pdf's People

Contributors

Stargazers

Watchers

Forkers

react-pdf's Issues

Recommend Projects

Recommend Topics

Recommend Org