Marmelator/pdf.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated Setup PDF.js in a website (markdown)

Tim van der Meij 2015-08-04 22:01:14 +02:00
parent 2147a377e0
commit b031e583e6
1 changed files with 10 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
Setup-PDF.js-in-a-website.md

@ -1,18 +1,18 @@
You can choose to use a pre-built version of PDF.js, or build PDF.js from source. You can choose to use a pre-built version of PDF.js or build PDF.js from source.
## Pre-built PDF.js ## Pre-built PDF.js
### With npm ### With npm
This way works by loading this file `pdfjs-dist/build/pdf.js` after you install PDF.js: This works by loading the file `pdfjs-dist/build/pdf.js` after you have installed PDF.js using:
npm install pdfjs-dist npm install pdfjs-dist
#### With webpack #### With Browserify or Webpack
If you use webpack or browserify there is an easy way to require the files: If you use Browserify or Webpack there is an easy way to require the files:
```javascript ```javascript
// In your webpack config: // In your Webpack config:
// //
// Install `npm install url-loader` first. // Install `npm install url-loader` first.
// This will enable you to get the url of the worker and the pdf to use in the index.js. // This will enable you to get the url of the worker and the pdf to use in the index.js.
@ -23,29 +23,23 @@ webpackConfig.module.loaders = {
} }
// in index.js // in index.js
//
// `var PDFJS = require('pdfjs-dist/build/pdf');` would be better but
// somehow the PDFJS becomes an empty object.
// Without any special config, requiring the file and letting it to pollute
// the global namespace is the way to go:
require('pdfjs-dist/build/pdf'); require('pdfjs-dist/build/pdf');
require('pdfjs-dist/web/pdf_viewer'); // Only if you need `PDFJS.PDFViewer` require('pdfjs-dist/web/pdf_viewer'); // Only if you need `PDFJS.PDFViewer`
// Webpack returns a string to the url because we configured the url-loader. // Webpack returns a string to the url because we configured the url-loader.
PDFJS.workerSrc = require('pdfjs-dist/build/pdf.worker.js'); PDFJS.workerSrc = require('pdfjs-dist/build/pdf.worker.js');
var url = require('assets/books/my book.pdf'); var url = require('assets/books/my book.pdf');
PDFJS.getDocument(url).then(function(pdf) {/* Continue the normal tutorial from the official readme.*/}) PDFJS.getDocument(url).then(function(pdf) {/* Continue the normal tutorial from the README.*/})
``` ```
### From examples ### From examples
When the source code of PDF.js changes, the [online demo](http://mozilla.github.io/pdf.js/web/viewer.html) is automatically updated. The source of all demo files can easily be accessed at https://github.com/mozilla/pdf.js/tree/gh-pages/. When the source code of PDF.js changes, the [online demo](http://mozilla.github.io/pdf.js/web/viewer.html) is automatically updated. The source of all demo files can easily be accessed at https://github.com/mozilla/pdf.js/tree/gh-pages. These files can also be uploaded to your server to use PDF.js to display PDF files from your website.
These files can also be uploaded to your server to use PDF.js to display PDF files from your website
1. Download https://github.com/mozilla/pdf.js/archive/gh-pages.zip. 1. Download https://github.com/mozilla/pdf.js/archive/gh-pages.zip.
2. Extract the zip file (a directory called "pdf.js-gh-pages" will be created). 2. Extract the ZIP file (a directory called "pdf.js-gh-pages" will be created).
3. Copy the following directories to your website: 3. Copy the following directories to your website:
* pdf.js-gh-pages/build/ * pdf.js-gh-pages/build/
* pdf.js-gh-pages/web/ * pdf.js-gh-pages/web/
The web/ directory contains a 1 MB pdf file called "compressed.tracemonkey-pldi-09.pdf". This file is only used as an example for the demo and can safely be removed if you need disk space. The web/ directory contains a 1 MB PDF file called "compressed.tracemonkey-pldi-09.pdf". This file is only used as an example for the demo and can safely be removed.
4. If you want to open a PDF from your website with PDF.js, simply link to the viewer and pass the location of the PDF file. For example: 4. If you want to open a PDF from your website with PDF.js, simply link to the viewer and pass the location of the PDF file. For example:
```html ```html
@ -53,4 +47,4 @@ These files can also be uploaded to your server to use PDF.js to display PDF fil
``` ```
## Build PDF.js from source ## Build PDF.js from source
After cloning PDF.js, you can build PDF.js from source by running `node make generic` in Git Bash or another terminal. This will create the built PDF.js in the `build` folder. Note that you must include `compatibility.js` in order to support browsers like IE8+. After cloning PDF.js, you can build PDF.js from source by running `node make generic` in Git Bash or another terminal. This will create the built PDF.js in the `build` folder, which you can upload to your server. Note that you must include `compatibility.js` in order to support browsers like IE8+.