legalthings / pdf.js-viewer Goto Github PK

View Code? Open in Web Editor NEW

45.0 21.0 54.0 3.05 MB

Compiled version of pdf.js viewer, modified to run embedded

License: Apache License 2.0

JavaScript 90.64% Shell 0.12% HTML 2.56% CSS 6.68%

pdf.js-viewer's Introduction

PDF.js viewer

PDF.js is a Portable Document Format (PDF) library that is built with HTML5.

This is a build version of the PDF.js, including the viewer.

Installation

bower install pdf.js-viewer

Usage

Include viewer.html using SSI or your favorite templating system.

<html>
  <head>
    <title>PDF.js viewer</title>
    <script src="bower_components/pdf.js-viewer/pdf.js"></script>
    <link rel="stylesheet" href="bower_components/pdf.js-viewer/viewer.css">
    
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>

  <body>
    <div class="pdfjs">
      <!--#include virtual="bower_components/pdf.js-viewer/viewer.html" --> 
    </div>

    <script>
      // note that the file can also be a Uint8Array if you want to serve binary data
      var file = 'some-document.pdf'; 

      // This initializes the webviewer, the file may be passed in to it to initialize the viewer with a pdf directly
      window.PDFJS.webViewerLoad(); 

      // open a file in the viewer
      window.PDFViewerApplication.open(file);
    </script>
  </body>
</html>

Upgrading the source

Normally mozilla's PDF js viewer, will only run as standalone. We forked the project and patched it, so you can include it within a page.

To update this version, get the patched pdf.js source code and build the project

git clone https://github.com/legalthings/pdf.js.git
cd pdf.js
npm install
gulp generic
cd ..

And update the files from source and patch them

cd pdf.js-viewer
npm install
./build.sh ../pdf.js/build/generic/

pdf.js-viewer's People

Contributors

Stargazers

Watchers

Forkers

sg1705 snehilmodani hroenick vijayallagi spalivela-cs inakrin lcaprini tmcdos aider aperta-project gare88 marceloalejoc clapointe paulsky wellbin 102010cncger cexpertlatam bastienmoulia nadeermalangadan theronl samanala-athaudahetti amontanari matthewdeeco ykravv denismalofeyev piwonesien mindsmash sharkon airvault fluanceit pepe-ves binglang1027 hermeslm karolbialykainos joshtechnologygroup cda-gambit cogitoweb manojkumar222mbd naveen2mn titobf solangetatiana dacc11 yakudik sandeepjadhav-v2 alasdairg inftec julamb nareshd5057 codeuiandy marselino-george

pdf.js-viewer's Issues

Wrong prefix

When the CSS get's prefixed, the CSS format becomes invalid. This is because
'@Keyframes progressIndeterminate {
0% { left: -142px; }
100% { left: 0; }
}'

becomes
'@Keyframes progressIndeterminate {
.pdfjs 0% { left: -142px; }
.pdfjs 100% { left: 0; }
}'.

Which is an invalid syntax. Please see this issue: https://github.com/substack/css-prefix/issues/6

Add viewer.css to bower 'main' property

Adding viewer.css to bower 'main' property will allow tools like wiredep to auto inject required css file.

viewer.js:3871 Uncaught (in promise) TypeError: Cannot read property '1' of null viewer.js:3871

var suggestedFilename = reFilename.exec(splitURI[1]) || reFilename.exec(splitURI[2]) || reFilename.exec(splitURI[3]); this line is giving me an error while loading pdf in web browser using pdf.js viewer

Add Webjar to https://www.webjars.org/

viewer.css setting un-namespaced body and html styles

on lines 255 - 269 of viewer.css pdf-js is setting un-namespaced body and html styles which is effecting our sites overall font size, family and body background colour.

html {
height: 100%;
width: 100%;
font-size: 10px
}

body {
height: 100%;
width: 100%;
background-color: #404040;
background-image: url(images/texture.png)
}

body, .pdfjs input, .pdfjs button, .pdfjs select {
font: message-box;
outline: 0
}

Remove all attached events after pdf-viewer closes

Is it possible to remove the attached event handlers after closing the pdf-viewer?

For example: If I use a RTE-Editor after I closed a pdf view, I can't use the n j p k keys because the listeners are still attached...

Many thanks for an answer!

ability to configure HOSTED_VIEWER_ORIGINS

HOSTED_VIEWER_ORIGINS is currently hardcoded to the mozilla domain it would be nice if we could pass some options to override it.

Cannot read property 'firstElementChild' of null

I am trying to embedded pdf on my html page using pdf.js, with the help of pdf viewer blog,I have included pdf.js and pdf.worker.js in my html file, but when I open the page, nothing is embedded and I am getting below error.
Cannot read property firstElementChild of null

Please help me in this.
Thanks!

HTML Code:

<body>  
<div class="pdfjs">
</div> 
<script src="{% static 'pdf.js-viewer/pdf.js'%}"></script>
<script src="{% static 'pdf.js-viewer/pdf.worker.js'%}"></script> 

<script type="text/javascript">
      PDFJS.webViewerLoad('http://url/mypdf.pdf');
</script>
</body>

Checkout below error:

Uncaught (in promise) TypeError: Cannot read property 'firstElementChild' of null at Object.PDFViewer (http://url/pdf.js:17939:52) at http://url/pdf.js:12985:21 at Object._initializeViewerComponents (http://url/pdf.js:12973:10) at http://url/pdf.js:12884:16PDFViewer

How do I build this?

The build script references a local folder called 'source'. Is that normally populated with the contents of the upstream repo?

Thanks!

New version of PDF.js

Hi.
Is there any chance, that You will upgrade pdf.js-viewer to the latest version of PDF.js? I looked at Your instruction, and noticed that it isn't actual, so I can't do that myself.

As far as I know in new version ar a lot of bug fixes, so it will be very helpful ;)

Thanks
Kplogo

Ability to unbind events registered by pdf viewer application

PDFViewerApplication binds multiple events but doesn't give functionality to unbind them, this is already fixed by Mozilla so that people can disable the events if and when required.

Error in README

git https://github.com/legalthings/pdf.js.git

should presumably be

git clone https://github.com/legalthings/pdf.js.git

functionality is not consistent

The icons marked in red don’t work consistently.
They sometimes do the right thing and sometimes just don’t respond to clicks at all

font-size is set globally for the whole page.

I'm experiencing an issue that when I include viewer.css in my angular app it sets the font-size for the whole page globally.

html {
    font-size: 10px;
    height: 100%;
}

Installed the last version from bower...
It breaks the whole app.

viewer.less @pdfjsImagePath

Hello,

In my project I would like to set a custom pdfjsImagePath. This is my current code:
globalVars: {pdfjsImagePath: '/resources/pdfjs/images'}

I think this should work. However, I get an error when compiling the viewer.less file to CSS. The error is
expected ')' got '/'. I think this is because the URL function doesn't include quotes. If I surround the string by quotes, the compiling succeeds. Like this:

border-image: url(@pdfjsImagePath/shadow.png) 9 9 repeat;
to
border-image: url('@pdfjsImagePath/shadow.png') 9 9 repeat;

Should this be the fix? Or should I set the pdfJsImagePath variable on a different way?

require('../build/pdf.js') not working

I got an error on pdfjsLib = require('../build/pdf.js'); (https://github.com/legalthings/pdf.js-viewer/blob/master/pdf.js#L12062)

Indeed there is no more build folder, maybe a patch for pdf.js is missing.