document-viewer-ts
Version:
PDF and MS Doc viewer written in TypeScript for React and vanilla JavaScript
92 lines (71 loc) • 2.33 kB
Markdown
Requires peer dependency `pdfjs-dist`:
```
npm install pdfjs-dist
```
Install the package:
```
npm install document-viewer-ts
```
If using webpack, copy `PATH/TO/NODE_MODULES/pdfjs-dist/build/pdf.worker.min.js` to a local directory:
`webpack.config.ts`
```
import CopyPlugin from "copy-webpack-plugin";
...
const config = {
...
plugins: [
...
new CopyPlugin({
patterns: [
{
from: "PATH/TO/NODE_MODULES/document-viewer/dist/worker/pdf.worker.min.js",
to: "PATH/TO/WORKER/FILE"
}
]
}
]
}
...
```
Call the init script in the root of your JS application using the path to your worker file.
`index.js`
```
import { init } from 'document-viewer'
init("PATH/TO/WORKER/FILE");
```
Wherever you want to include a document viewer in the HTML, include a `<div />` with `class="viewer-container"` and `id` being some unique key (on the page) and `data-document-url` being the url of the document you want to display. Also make sure you're importing `styles.css` from the package in your HTML head.
`index.html`
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./index.js"></script>
<link rel="stylesheet" href="../node_modules/document-viewer/dist/styles/styles.css"></link>
</head>
<body>
<div class="viewer-container" id="doc-1" data-document-url="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"></div>
</body>
</html>
```
Import the `Viewer` component and call it with the proper `documentId`, `documentUrl`, and `workerSrc` props. Also make sure to import `styles.css` in your app.
`index.jsx`
```
import React from 'react'
import { Viewer } from 'document-viewer'
export default () =>
<Viewer
documentId="doc-1"
documentUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
workerSrc="PATH/TO/WORKER/FILE"
/>
```