document-viewer-ts
Version:
PDF and MS Doc viewer written in TypeScript for React and vanilla JavaScript
105 lines (81 loc) • 2.94 kB
Markdown
# Document Viewer
## PDF and DOCX viewer for Vanilla JavaScript and React applications
### Installation
Requires peer dependency `pdfjs-dist` (v6 or later):
```
npm install pdfjs-dist
```
Install the package:
```
npm install document-viewer-ts
```
### Serving the worker and the wasm decoders
Copy the pdf.js worker to a served location, and copy `pdfjs-dist/wasm` **into a
`wasm/` directory beside it**. The viewer derives pdf.js's `wasmUrl` from the
`workerSrc` you pass in; pdf.js's own default is page-relative and 404s on any
nested route, which takes down JBIG2/JPEG2000 image decoding along with it.
`webpack.config.ts`
```
import CopyPlugin from "copy-webpack-plugin";
...
const config = {
...
plugins: [
...
new CopyPlugin({
patterns: [
{
from: "PATH/TO/NODE_MODULES/pdfjs-dist/legacy/build/pdf.worker.min.mjs",
to: "PATH/TO/WORKER/pdf.worker.min.mjs"
},
{
from: "PATH/TO/NODE_MODULES/pdfjs-dist/wasm",
to: "PATH/TO/WORKER/wasm"
}
]
})
]
}
...
```
#### With HTML and Vanilla JS
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-ts'
init("PATH/TO/WORKER/pdf.worker.min.mjs");
```
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-ts/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>
```
### With React
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-ts'
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/pdf.worker.min.mjs"
/>
```
`renderDocument` returns a teardown function, and the React `Viewer` calls it on
unmount: it cancels any in-flight page render, removes the resize listener and
destroys the pdf.js document and its worker.