Skip to content

A small script to generate thumbnail images for pdf files, based on pdf.js

Notifications You must be signed in to change notification settings

scandel/pdfThumbnails

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

PDF Thumbnails

A small script to parse html files and generate a source image for img elements with a data-pdf-thumbnail-file attribute linking to a pdf file.
The image is a view of the first page of the pdf. The script relies on the pdf.js library.

Online demo

See a PDF Thumbnails demo here.

Getting started

First get a local copy of the code, clone it using git:

$ git clone git://github.com/scandel/pdfThumbnails
$ cd pdfThumbnails

Then get a local copy of pdf.js (>=2.0). Use the prebuilt version that you can find on this page. Download and extract it. You only need to keep the build directory (with both pdf.js and pdf.worker.js). Make sure your directory structure looks like:

    pdfThumbnails
    |--pdf.js
    |  |--build
    |     |--pdf.js
    |     |--pdf.worker.js
    |--pdfThumbnails.js
    |--index.html
    |--example.pdf
    |--pdf.png
    ...

Now visit index.html in your browser, you should see the demo page with thumbnails of example.pdf.

Use it in your own project

You just need to keep the pdfThumbnails.js file from this project, and the pdf.js and pdf.worker.js files from pdf.js (let them both in the same directory as pdf.js will try to load the worker). In your html file, include the javascripts:

<script src="/path/to/pdfThumbnails.js" data-pdfjs-src="/path/to/pdf.js/build/pdf.js"></script>

The data-pdfjs-src attribute specifies the path of the library, which will only be loaded if there's any PDF thumbnail to display in the page.

To show a thumbnail, write an img element with a data-pdf-thumbnail-file attribute:

<img data-pdf-thumbnail-file="/my/file.pdf">

The pdf file path is a relative or absolute path to a file hosted on your site (no cross domain request).

You can add a width or a height in pixels for the generated image. If not, the size of the generated image will be the one of the pdf.

<img data-pdf-thumbnail-file="/my/file.pdf" data-pdf-thumbnail-width="200">
<img data-pdf-thumbnail-file="/my/file.pdf" data-pdf-thumbnail-height="150">

You can also add a src attribute to the image, which will act as a placeholder:

<img data-pdf-thumbnail-file="/my/file.pdf" src="pdf.png">

This way:

  • the image in src will be shown to the user during the loading and rendering time of the pdf, and the space of the image will be filled when the page is shown to the user;
  • if an error occurs (file not found or impossible to open), the user will still see something.

Errors (file not found or wrong format) are logged in the console.

About

A small script to generate thumbnail images for pdf files, based on pdf.js

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published