Skip to content

senny/pdfjs_viewer-rails

Folders and files

NameName
Last commit message
Last commit date

Latest commit

6c8358f · Jul 1, 2021

History

79 Commits
Feb 11, 2019
Jun 2, 2016
Jul 28, 2016
Jul 28, 2016
Sep 25, 2020
Jul 1, 2021
Jan 28, 2019
Sep 25, 2020
Sep 11, 2017
Sep 11, 2017
May 12, 2020
Jul 1, 2021
Sep 25, 2020
Feb 18, 2015
Sep 25, 2020
Feb 18, 2015
Feb 11, 2019
Sep 25, 2020

Repository files navigation

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:

$ bin/rake

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

License

pdfjs_viewer-rails is released under the MIT License.