Skip to content
PDF.js viewer packaged as a Rails engine.
CSS HTML Ruby JavaScript
Branch: master
Clone or download
Latest commit 195807b Feb 14, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app Use a per version query string for fetching the pdf.js worker. Feb 11, 2019
bin
config add reduced view for js viewer. Jul 28, 2016
doc/files add reduced view for js viewer. Jul 28, 2016
gemfiles Remove double declaration of sqlite3 from the travis test gemfiles. Jan 28, 2019
lib 0.3.1 Feb 14, 2019
public/pdfjs Bump pdf.js to 1.10.100. Jan 28, 2019
test
.gitattributes tell github linguist that this isn't really a javascript repo [ci skip] Sep 11, 2017
.gitignore test against stable rails versions Sep 11, 2017
.travis.yml
CHANGELOG.md 0.3.1 Feb 14, 2019
Gemfile Add puma to the test gems. Jan 28, 2019
MIT-LICENSE
README.md add CORS section to readme [ci skip] Sep 25, 2017
Rakefile initial extraction. Feb 18, 2015
UPDATE.md Use a per version query string for fetching the pdf.js worker. Feb 11, 2019
pdfjs_viewer-rails.gemspec

README.md

pdfjs_viewer-rails

Build Status

Installation

Add this line to your application's Gemfile:

gem 'pdfjs_viewer-rails'

Note: pdfjs_viewer-rails is still in early development. Please report if you encounter any issues along the way.

Viewer Styles

This gem ships with three viewer styles:

full

full style

reduced

reduced style

minimal

minimal style

Usage

Using the mountable Engine

The mountable engine makes it extremely simple to integrate the PDF.js viewer into your application:

config/routes.rb

mount PdfjsViewer::Rails::Engine => "/pdfjs", as: 'pdfjs'

Now you can use a link in your templates to open up the viewer:

<%= link_to "display using the full viewer", pdfjs.full_path(file: "/sample.pdf") %>
<%= link_to "display using the minimal viewer", pdfjs.minimal_path(file: "/sample.pdf") %>

Using the helper

If your integration scenario is more complex you may want to consider using the pdfjs_viewer helper. This allows you to embed the viewer into a container like an iframe.

<%= pdfjs_viewer pdf_url: "/sample.pdf", style: :full %>
<%= pdfjs_viewer pdf_url: "/sample.pdf", style: :minimal %>

NOTE: The helper will render a full HTML document and should not be used in a layout.

Verbosity of PDF.js

The verbosity of PDF.js can be set with:

$ export PDFJS_VIEWER_VERBOSITY=warnings

Verbosity levels:

  • errors (default)
  • warnings
  • infos

Customizing the viewer

If you're not happy with the 3 different styles with which pdfjs_viewer-rails is shipped, you can make your own adjustments by creating a file in app/views/pdfjs_viewer/viewer/_extra_head.html.erb. This file will be appended to the viewer's <head> tag.

So for example, if you'd like to hide the print icon:

<!-- app/views/pdfjs_viewer/viewer/_extra_head.html.erb -->

<style>
  #print { display: none; }
</style>

NOTE: You can use the parameters you passed into pdfjs_viewer (if you're using the helper):

<!-- Somewhere in a view in your project -->
<%= pdfjs_viewer style: "reduced", something: "sick!" %>

and then access them:

<!-- app/views/pdfjs_viewer/viewer/_extra_head.html.erb -->

<%= tag.meta name: "something", content: something %>

Setting up CORS

If you plan to load PDFs from that are hosted on another domain from the PDF.js viewer, you may need to set up a Cross-Origin Resource Sharing (CORS) Policy to allow PDF.js to read PDFs from your domain. If you're serving PDFs straight from Amazon S3 (e.g. bucket.s3-us-west-1.amazonaws.com), you will need to add a CORS policy to the S3 bucket. This CORS configuration has been tested on S3:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Range</AllowedHeader>
        <AllowedHeader>Authorization</AllowedHeader>
        <ExposeHeader>Accept-Ranges</ExposeHeader>
        <ExposeHeader>Content-Encoding</ExposeHeader>
        <ExposeHeader>Content-Length</ExposeHeader>
        <ExposeHeader>Content-Range</ExposeHeader>
    </CORSRule>
</CORSConfiguration>

Development

Tests can be executed with:

$ bundle exec rake

This will render the sample.pdf using phantomjs and save screenshots into test/sandbox.

License

pdfjs_viewer-rails is released under the MIT License.

You can’t perform that action at this time.