You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1.1 KiB
51 lines
1.1 KiB
2 years ago
|
This folder demonstrates how to use [React PDF viewer](https://react-pdf-viewer.dev) with [Create React App](https://github.com/facebook/create-react-app).
|
||
|
|
|
||
|
|
## Install
|
||
|
|
|
||
|
|
* Install the dependencies
|
||
|
|
|
||
|
|
```console
|
||
|
|
$ npm install
|
||
|
|
```
|
||
|
|
|
||
|
|
* Build
|
||
|
|
|
||
|
|
```console
|
||
|
|
$ npm run build
|
||
|
|
```
|
||
|
|
|
||
|
|
* Run locally
|
||
|
|
|
||
|
|
```console
|
||
|
|
$ npm run start
|
||
|
|
```
|
||
|
|
|
||
|
|
Visit http://localhost:3000 to see it in action.
|
||
|
|
|
||
|
|
## Spotlights
|
||
|
|
|
||
|
|
[App.js](src/App.js):
|
||
|
|
|
||
|
|
``` javascript
|
||
|
|
import { Viewer, Worker } from '@react-pdf-viewer/core';
|
||
|
|
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
|
||
|
|
|
||
|
|
import '@react-pdf-viewer/core/lib/styles/index.css';
|
||
|
|
import '@react-pdf-viewer/default-layout/lib/styles/index.css';
|
||
|
|
|
||
|
|
const defaultLayoutPluginInstance = defaultLayoutPlugin();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Worker workerUrl="https://unpkg.com/pdfjs-dist@2.15.349/build/pdf.worker.js">
|
||
|
|
<div style={{ height: '750px' }}>
|
||
|
|
<Viewer
|
||
|
|
fileUrl={`${process.env.PUBLIC_URL}/pdf-open-parameters.pdf`}
|
||
|
|
plugins={[
|
||
|
|
defaultLayoutPluginInstance,
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</Worker>
|
||
|
|
);
|
||
|
|
```
|