Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/w99910/pdf-viewer
Easy to use pdf viewer written in vanilla typescript
https://github.com/w99910/pdf-viewer
Last synced: about 14 hours ago
JSON representation
Easy to use pdf viewer written in vanilla typescript
- Host: GitHub
- URL: https://github.com/w99910/pdf-viewer
- Owner: w99910
- License: mit
- Created: 2023-09-05T09:49:58.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-10-09T14:49:29.000Z (over 1 year ago)
- Last Synced: 2024-11-27T19:14:18.659Z (2 months ago)
- Language: TypeScript
- Homepage: https://w99910.github.io/pdf-viewer/
- Size: 15.7 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# PDF Viewer
Easy-to-use PDF Viewer library written in vanilla typescript based on the core pdf
library [pdfjs](https://github.com/mozilla/pdf.js/).
> DEMO: Example pdf viewer is hosted at [https://w99910.github.io/pdf-viewer/](https://w99910.github.io/pdf-viewer/).
## Purposes of this library
The core library [pdfjs](https://github.com/mozilla/pdf.js/) currently offers
the [web pdf viewer](https://github.com/mozilla/pdf.js/blob/master/web) as an example and need
to copy/paste the files in order to integrate pdf viewer in your
project. [It](https://mozilla.github.io/pdf.js/getting_started/) is also said that
> However, we do ask if you plan to embed the viewer in your own site, that it not just be an unmodified version. Please
> re-skin it or build upon it.
Thus, I implemented this package because
- save the copy/paste time
- construct the container and load pdf using url. No need to specify button container or overlay container etc.
- add/remove buttons such as download, preview thumbnails, etc.
## Usage
### Basic
- Specify the pdf container
```html
```
- Import the css file and construct the `PDFViewer` class
```js
import 'pdf-viewer/dist/style.css';
import PDFViewer from "pdf-viewer";
let pdfViewer = new PDFViewer(document.getElementById('pdf'),{
fullscreen: false,
overlay: false,
disableClickoutside: false,
})
```
- Load the pdf
```js
pdfViewer.init('/test.pdf');
```
### Adding/Removing buttons
- ### Removing default buttons
You can remove default buttons by using `setButtons` method.
```js
// remove all default buttons
pdfViewer.setButtons([]);
//or replace button
import {SearchButton} from 'pdf-viewer';
pdfViewer.setButtons([new SearchButton]);
```
- ### Adding pre-defined buttons
You can add buttons by using `addButton` method.
```js
import {DownloadButton} from 'pdf-viewer';
pdfViewer.addButton(new DownloadButton);
```
- ### Creating custom button
You need to implement `Button` interface in order to create custom button.
- As a `Class`,
```js
// custom-button.ts
import {Button} from 'pdf-viewer';
export class CustomButton implements Button {
build(data): HTMLElement | null {
}
onClick(data) {
}
position(): string {
} // either left, center, right;
reset() {
// this is called whenever a new pdf is initialised.
}
}
// then add button
pdfViewer.addButton(new CustomButton);
```
- As an `Object`,
```js
pdfViewer.addButton({
build: (data) => {},
onClick: (data) => {},
position: () => 'left',
reset: () => {},
});
```
As you can see `data` variable is passed to `build` method and `onClick` method. That `data` variable is an object
consisting of
- pdfDocument: pdfjsLib.PDFDocumentProxy,
- buttonsContainer: HTMLDivElement,
- pdfContainer: HTMLDivElement,
- mainContainer: HTMLDivElement,
- bodyContainer: HTMLDivElement,
- eventBus: pdfjsViewer.EventBus,
- pdfLinkService: pdfjsViewer.PDFLinkService,
- pdfFindController: pdfjsViewer.PDFFindController,
- pdfScriptingManager: pdfjsViewer.PDFScriptingManager,
- pdfViewer: pdfjsViewer.PDFViewer,
- url: string,
## API
- `init(url: string, options: PDFViewerOptions = {})`
```js
type PDFViewerOptions = DocumentInitParameters & { initialPageIndex?: number, disableClickoutside?:boolean }
```
- `viewPage(index:number)` - Load page into view.
- `data` - Get data of pdfViewer. i.e,
- pdfDocument: pdfjsLib.PDFDocumentProxy,
- buttonsContainer: HTMLDivElement,
- pdfContainer: HTMLDivElement,
- mainContainer: HTMLDivElement,
- bodyContainer: HTMLDivElement,
- eventBus: pdfjsViewer.EventBus,
- pdfLinkService: pdfjsViewer.PDFLinkService,
- pdfFindController: pdfjsViewer.PDFFindController,
- pdfScriptingManager: pdfjsViewer.PDFScriptingManager,
- pdfViewer: pdfjsViewer.PDFViewer,
- url: string,
- `setButtons(buttons:Array)` - overwrite default buttons.
- `addButton(button:Button)` - add a new button to existing buttons.
## Credits
The icons used in this library are from [lucid.dev](https://lucide.dev).
## LICENSE
This package is licensed under MIT.