/ember-pdfjs

An Ember Addon for PDFJS

Primary LanguageJavaScriptMIT LicenseMIT

Ember PDFJS Addon

Latest NPM release Downloads per month Total downloads Dependencies Dev Dependencies Issues Issues Ember Observer Score

This addon will provide some useful components for viewing and interacting with PDF documents to your ember-cli project. This addon unites the Ember framework ecosystem and the PDFJS open source project by Mozilla.

Installation

Within your ember-cli project:

  • ember install ember-pdfjs

This will add a pdf-document component to your application.

Standalone Sample

Though this project is an addon type for including a component in your Ember project, you can also kick the tires on the component in a live sample with this project.

git clone git@github.com:mysterlune/ember-pdfjs.git
cd ember-pdfjs && npm install && bower install
ember serve

... and in typical Ember fashion, a development server will fire up on port 4200. Then, simply visit:

http://localhost:4200

... and take a look at the familar, lovely "tracemonkey" document.

Usage

In a template, just do:

{{pdf-document src=[model.src]}}

or

{{pdf-document src="/path/to/your.pdf"}}

[model.src] can be a Uint8Array, as PDFJS allows this as a source type for the ...getDocument() signature.

Password Protected PDF Support

The addon also allows for the registration of an Ember action handler for use when a PDF is password protected. In a template you would add an action closure:

{{pdf-document src=[model.src] onPassword=(action 'myPasswordAction')}}

The associated action handler would look something like the following:

import { PasswordResponses } from 'ember-pdfjs/components/pdf-document';

export default Ember.Controller.extend({
    actions: {
        'myPasswordAction': function(setPassword, reason) {
            // The reason value provides an indication of first prompt
            // versus incorrect password prompt
            let promptText = 'Enter the password to open this PDF file.';
            if (reason === PasswordResponses.INCORRECT_PASSWORD) {
                promptText = 'Invalid password. Please try again.';
            }

            // Prompt the user for their password in some application-specific way
            let password = promptUserForPassword(promptText);

            // Callback with the password received from the prompt
            setPassword(password);
        }
    }
});

The action receives two parameters:

  • setPassword - A callback function that is used to set the password received from the user
  • reason - The "reason" that the password is being requested. One of:
    • PasswordResponses.NEED_PASSWORD (First time prompt)
    • PasswordResponses.INCORRECT_PASSWORD (Re-prompt when previous password was incorrect)

Note on Security

You will get errors and it will not load if you try to link to something not hosted on your domain. You will need to update contentSecurityPolicy in your Ember project accordingly.

Checkout Ember Igniter for a how-to on updating contentSecurityPolicy for your app.

Caveats

The goals of this project are spelled out in Issues. If there are recommendations that you need for own project, likely they will benefit others.

Running Tests

  • ember test

Contributing

If you have an "ember-ish"/"pdf.js-ish" addon project in the works -- or don't think this project will work for your needs -- please let's try to pull this together into one solution.

The Ember Community maintains a fundamental precept of common solutions to common problems. Proliferating addon solutions is kinda bunk, from a community perspective.

Please contribute!

We confessed that we're not the only ones trying to climb the same mountain.

-- DHH, on the character of the Rails Community