{"id":26606877,"url":"https://github.com/forthealllight/react-read-pdf","last_synced_at":"2025-04-08T04:17:15.041Z","repository":{"id":45329041,"uuid":"149754926","full_name":"forthealllight/react-read-pdf","owner":"forthealllight","description":"a mobile-friendly  PDF Reader in browser for React 16.5","archived":false,"fork":false,"pushed_at":"2023-07-08T00:10:46.000Z","size":4007,"stargazers_count":77,"open_issues_count":21,"forks_count":32,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-02T18:55:11.396Z","etag":null,"topics":["mobile","pdf-viewer","pdfjs","react"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/forthealllight.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-09-21T11:36:41.000Z","updated_at":"2024-12-12T15:39:31.000Z","dependencies_parsed_at":"2024-06-19T09:26:45.905Z","dependency_job_id":null,"html_url":"https://github.com/forthealllight/react-read-pdf","commit_stats":{"total_commits":84,"total_committers":3,"mean_commits":28.0,"dds":"0.023809523809523836","last_synced_commit":"dd149455a9426912b1986615bc3e33f3d6d8cb44"},"previous_names":["forthealllight/react-pdf-reader"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forthealllight%2Freact-read-pdf","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forthealllight%2Freact-read-pdf/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forthealllight%2Freact-read-pdf/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forthealllight%2Freact-read-pdf/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/forthealllight","download_url":"https://codeload.github.com/forthealllight/react-read-pdf/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247773721,"owners_count":20993639,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mobile","pdf-viewer","pdfjs","react"],"created_at":"2025-03-23T22:23:49.522Z","updated_at":"2025-04-08T04:17:15.025Z","avatar_url":"https://github.com/forthealllight.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-read-pdf\n[Chinese Document](https://github.com/forthealllight/blog/issues/27)\n\u003e a mobile-friendly  PDF Reader in browser for React 16.x\n\n\n## Features\n\n* **Simple**: It is very easy to use\n* **Mobile-friendly**: Support all mobile terminal devices including mobile,pad and others\n\n## Browser Support\n\n* IE 10+\n* Firefox 3.6+\n* Chrome 6+\n* Safari 6+\n* Opera 11.5+\n* iOS Safari 6.1+\n* Android Browser 3+\n\n## Quick Start\n\n### 1. Import react-read-pdf  into your react.js project.\n\n(You should import react firt,The version of react must be more than 16.x)\n\nUsing build tools:\n\n```bash\nnpm install --save react-read-pdf\n```\nUsing PDFReader in PC:\n```js\nimport React from 'react';\nimport { PDFReader } from 'react-read-pdf';\n```\nUsing MobilePDFReader in mobile terminal devices:\n```js\nimport React from 'react';\nimport { MobilePDFReader } from 'react-read-pdf';\n\n```\n### 2. Now you have it. The simplest usage:\n\n```js\nimport { MobilePDFReader } from 'react-read-pdf';\nexport default class Test extends Component{\n  render(){\n    return \u003cdiv style={{overflow:'scroll',height:600}}\u003e\n            \u003cMobilePDFReader url=\"http://localhost:3000/test.pdf\"/\u003e\n           \u003c/div\u003e\n  }\n}\n```\n\n```js\nimport ReactDOM from 'react-dom';\nimport Test from './test'\nReactDOM.render(\u003cTest /\u003e, document.getElementById('root'));\n```\n\nIt supports all mobile terminal devices including mobile,pad and others,the next image is a lively example in iphoneX \n\n\u003cimg src=\"https://raw.githubusercontent.com/wiki/forthealllight/react-read-pdf/ip.jpeg\" width=\"320\"\u003e\n\n## Documentation\n\nreact-read-pdf mainly consists of two different components. ***PDFReader and MobilePDFReader***.\n\n### 🌱 PDFReader\n\n```js\nimport { PDFReader } from 'react-read-pdf'\n\n...\n\u003cPDFReader url={\"http://localhost:3000/test.pdf\"} ...\u003e\n```\n####  Props in PDFReader Component \n\n\u003ctable\u003e\n        \u003ctr\u003e\n            \u003cth\u003eProps name\u003c/th\u003e\n            \u003cth\u003eType\u003c/th\u003e\n            \u003cth\u003eDescription\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003eurl\u003c/th\u003e\n            \u003cth\u003estring | object\u003c/th\u003e\n            \u003cth\u003eif url is a string, it represents absolute address or relative address of PDF files. if url is a object, you can see this \u003ca href=\"#url\"\u003eurl object type \u003c/a\u003e for details\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003edata\u003c/th\u003e\n            \u003cth\u003estring\u003c/th\u003e\n            \u003cth\u003ebinary-like data of PDF.For example,in javascript, you can use the method \"atob\" to convert base64 encoded PDF to binary-like data. \u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003epage\u003c/th\u003e\n            \u003cth\u003enumber\u003c/th\u003e\n            \u003cth\u003edefault value is 1 ,decides that which page to show in PDF file.\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003escale\u003c/th\u003e\n            \u003cth\u003enumber\u003c/th\u003e\n            \u003cth\u003edecides the viewport in render\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003ewidth\u003c/th\u003e\n            \u003cth\u003enumber\u003c/th\u003e\n            \u003cth\u003edecides the width of viewport\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003eshowAllPage\u003c/th\u003e\n            \u003cth\u003eboolean\u003c/th\u003e\n            \u003cth\u003edefault value is false , if it is true , it will render all pages of the pdf file. if it is false ,it will only show the \"currentPage\" according to the page props's value.\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003eonDocumentComplete\u003c/th\u003e\n            \u003cth\u003efunction\u003c/th\u003e\n            \u003cth\u003eafter load the PDF file, in this function ,you can get some informations of the PDF file you can see this \u003ca href=\"#function1\"\u003efunction type\u003c/a\u003e for details\u003c/th\u003e\n        \u003c/tr\u003e\n    \u003c/table\u003e\n    \n    \n    \n\u003ca name=\"url\"\u003e\u003cb\u003eurl\u003c/b\u003e\u003c/a\u003e \nthe url property of ***PDFReader***\n\nType: \n\n - string : it represents absolute address or relative address of PDF files\n - object :\n \nProperties:\n Property Name| type |Description\n--- | --- | ---\nurl | string | it represents absolute address or relative address of PDF files\nwithCredentials | boolean | is allow requests to carry cookie or not\n\n\u003ca name=\"function1\"\u003e\u003cb\u003eonDocumentComplete\u003c/b\u003e\u003c/a\u003e \nthe onDocumentComplete property of ***PDFReader***\n\nType:\n\n - function(totalPage)\n\nonDocumentComplete's type is a function, the fisrt default parameter is  totalPage of the PDF file\n \n#### Notes\n\nThe url of props can be string or object.\n\nThe following two ways are the same.\n\nOne is :\n\n```js\n \u003cMobilePDFReader url=\"http://localhost:3000/test.pdf\"/\u003e\n\n```\nthe other is :\n```js\n \u003cMobilePDFReader url={url:\"http://localhost:3000/test.pdf\"}/\u003e\n\n```\n### 🌱 MobilePDFReader\n\n```js\nimport { MobilePDFReader } from 'react-read-pdf'\n\n...\n\u003cMobilePDFReader url={\"http://localhost:3000/test.pdf\"} ...\u003e\n```\n\n####  Props in MobilePDFReader Component \n\u003ctable\u003e\n        \u003ctr\u003e\n            \u003cth\u003eProps name\u003c/th\u003e\n            \u003cth\u003eType\u003c/th\u003e\n            \u003cth\u003eDescription\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003eurl\u003c/th\u003e\n            \u003cth\u003estring | object\u003c/th\u003e\n            \u003cth\u003eit represents absolute address or relative address of PDF files.\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003epage\u003c/th\u003e\n            \u003cth\u003enumber\u003c/th\u003e\n            \u003cth\u003edefault value is 1 ,decides that which page to show in PDF file.\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003escale\u003c/th\u003e\n            \u003cth\u003e'auto' | number\u003c/th\u003e\n            \u003cth\u003edefaut value is 'auto', react-react-pdf use pdfjs-viewer,so if the scale is 'auto' , it can Adaptive mobile device .This property decides the viewport in render\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003eminScale\u003c/th\u003e\n            \u003cth\u003enumber\u003c/th\u003e\n            \u003cth\u003edefaut value is 0.25,  decides the minimum value of scale\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003emaxScale\u003c/th\u003e\n            \u003cth\u003enumber\u003c/th\u003e\n            \u003cth\u003edefaut value is 10,  decides the max value of scale\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003eisShowHeader\u003c/th\u003e\n            \u003cth\u003eboolean\u003c/th\u003e\n            \u003cth\u003edefaut value is true, in order to show lively example.'react-react-pdf' added default style to  special header, you can remove this style ,if you change this value to false\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003eisShowFooter\u003c/th\u003e\n            \u003cth\u003eboolean\u003c/th\u003e\n            \u003cth\u003edefaut value is true, in order to show lively example.'react-react-pdf' added default style to  special footer, you can remove this style ,if you change this value to false\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth\u003eonDocumentComplete\u003c/th\u003e\n            \u003cth\u003efunction\u003c/th\u003e\n            \u003cth\u003eafter load the PDF file, in this function ,you can get some informations of the PDF file you can see this \u003ca href=\"#function2\"\u003efunction type\u003c/a\u003e for details\u003c/th\u003e\n        \u003c/tr\u003e\n    \u003c/table\u003e\n\n\u003ca name=\"function2\"\u003e\u003cb\u003eonDocumentComplete\u003c/b\u003e\u003c/a\u003e \nthe onDocumentComplete property of ***MobilePDFReader***\n\nType: \n\n - function(totalPage,title,otherObj)\n\nProperties:\n Property Name| type |Description\n--- | --- | ---\ntotalPage | number | the totalPage of the PDF file\ntitle | title | the title of the PDF file\notherObj | object | other coding information of the PDF file\n\n#### Notes\n\nI strongly recommend you to set initial value of scale is 'auto',the default is 'auto' too\n\n \n## Development\n\n* **[React](https://facebook.github.io/react/)** (16.x)\n* **[Webpack](https://webpack.js.org/)** (4.x)\n* **[Typescript](https://www.typescriptlang.org/)** (3.x)\n* **[Hot Module Replacement (HMR)](https://webpack.js.org/concepts/hot-module-replacement/)** using [React Hot Loader](https://github.com/gaearon/react-hot-loader) (4.x)\n* [Babel](http://babeljs.io/) (7.x)\n* [Less](http://sass-lang.com/) \n* [React-css-modules](https://github.com/gajus/react-css-modules)using css-modules\n* [Jest](https://facebook.github.io/jest/) - Testing framework for React applications\n* Production build script\n* Image loading/minification using [Image Webpack Loader](https://github.com/tcoopman/image-webpack-loader)\n* Typescript compiling using [Typescript Loader](https://github.com/TypeStrong/ts-loader) (5.x)\n* Code quality (linting) for Typescript and LESS/CSS.\n\n## Installation\n1. Clone/download repo\n2. `yarn install` (or `npm install` for npm)\n\n## Usage\n**Development**\n\n`yarn run start-dev`\n\n* Build app continuously (HMR enabled)\n* App served @ `http://localhost:8080`\n\n**Production**\n\n`yarn run start-prod`\n\n* Build app once (HMR disabled)\n* App served @ `http://localhost:3000`\n\n---\n\n**All commands**\n\nCommand | Description\n--- | ---\n`yarn run start-dev` | Build app continuously (HMR enabled) and serve @ `http://localhost:8080`\n`yarn run start-prod` | Build app once (HMR disabled) and serve @ `http://localhost:3000`\n`yarn run build` | Build app to `/dist/`\n`yarn run test` | Run tests\n`yarn run lint` | Run Typescript and SASS linter\n`yarn run lint:ts` | Run Typescript linter\n`yarn run lint:sass` | Run SASS linter\n`yarn run start` | (alias of `yarn run start-dev`)\n\n\n\n**Note**: replace `yarn` with `npm` if you use npm.\n\n\n**License**\n\nMIT License\n\n  [1]: https://raw.githubusercontent.com/wiki/forthealllight/react-read-pdf/ip.jpeg\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fforthealllight%2Freact-read-pdf","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fforthealllight%2Freact-read-pdf","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fforthealllight%2Freact-read-pdf/lists"}