Code Monkey home page Code Monkey logo

pdfjs_viewer-rails's Introduction

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.

pdfjs_viewer-rails's People

Contributors

adamsonson avatar bierik avatar gingermusketeer avatar jone avatar kevgalway avatar neodelf avatar nicwillemse avatar p8 avatar sajedhassan avatar senny avatar siegy22 avatar yayajacky avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Forkers

alexfiennes

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.