Pdf.js: How to get pdf.js working?

[AliND]

Dear All,

I knew about pdf.js just this morning, and it is unbelievably good; probably the future of Pdf.

I wanted to clone the demo, so that I just change the source page in the viewer.js.

First, I downloaded the images and elements manually - didn't get it working. Then, I downloaded the zip, and played a lot with the web & src folders - but got no where, as I was getting different kinds of errors everytime I upload them.

The final solution was to download all the items related to the demo page including locale.properties using WinHTTrack , and now, I am just getting the following error: "InvalidPDFException".

There is one guy, who developed a simple demo - I uploaded it to my server and it works like a charm. The only problem is that it is an old version with no pre-loader, and no design at all like the new one!

http://www.worldwidewhat.net/2011/08/render-pdf-files-with-html5/

Any help is really appreciated.

[benbro]

This is a place to report bugs. It is not a support forum.
Please read the README on the front page and look at the viewer and examples
http://mozilla.github.io/pdf.js/web/viewer.html
http://jsbin.com/pdfjs-helloworld-v2/edit#html,live
http://jsbin.com/pdfjs-prevnext-v2/edit#html,live

[AliND]

Thanks benbro,
I didn't know that - I have had a look at all the support docs to no avail.

Would you please suggest a website that could offer such support?
Thanks in advance.

[benbro]

All the info you are looking for is on the README on the front page:
https://github.com/mozilla/pdf.js/blob/master/README.md
Look under the questions section.

[timvandermeij]

@AliND The examples provided by @benbro should do the trick. It's indeed best to download the entire zip or tp clone the repository. I got it working by simply cloning the repository and running it on a local XAMPP instance. Do not forget that the actual viewer is in the web/viewer.html file, so visiting the root folder will result only in a folder listing.

Are you trying to get it working on a web server or on a local XAMPP/WAMP instance? Please post any additional information (exact error messages/warnings from the console and OS/browser) if you keep on getting errors. If you're uploading it to a web server, a link to your viewer can also help track down any problems. We'll be happy to help if you really can't seem to figure it out yourself. :)

[AliND]

@timvandermeij First I thank you for your kind reply. I also thank @benbro very much, but the links didn't help me solve the problem.

I noticed that many people are(were) having the same problem. Some had it unsolved, while those who had it solved didn't show the steps! I believe that writing such a very small guide on how to get it working for beginners would be very useful.

@timvandermeij , I can't install XAMPP or any other server agent for some reasons. I have just created a free account, which you can access with the following ftp user details:
Hostnames: pdfjs.eu.pn
FTP Username: 1468147_admin
FTP Password: hello123?

I tried three different approaches, and I got three different pdf warnings:

1- I downloaded everything with WinHTTrack, then uploaded them and I get this error:
http://pdfjs.eu.pn/pdf.js/web/viewer.html
or "InvalidPDFException" . It is strange, however, that I could open it offline (without server installed) using Safari, although not fully correct.

2- I get this error (no warning message), but the page doesn't display
http://pdfjs.eu.pn/pdf2.js/web/viewer.html

3- If I upload the whole zipped folder (all files), I arrive at this error:
[an error occurred while processing this directive]
and then, the design is lost, all it shows are some buttons and fields.

I really appreciate your help.
Waiting for your suggestions - Many thanks
AliND

[yurydelendik]

Looking at http://pdfjs.eu.pn/pdf.js/build/pdf.js, there is "GET" replaced by "GET.html" at your server (probably mirroring program), e.g.:

      };

      xhr.open('GET.html', this.url);
      for (var property in this.httpHeaders) {
        var value = this.httpHeaders[property];

A the http://mozilla.github.io/pdf.js/build/pdf.js it is without ".html". Closing the issue as invalid.

[yurydelendik]

use git to pull the gh-pages brach with the production code: git clone -b gh-pages https://github.com/mozilla/pdf.js.git pdfjs-gh-pages

[AliND]

Many thanks @yurydelendik - I really appreciate your input.

However, I am a novice with php and javascript.

I have tried your advise (GET), and it is indeed useful. Now, the loader shows, but not the document. Actually, when I first uploaded the web & src folders, I did so, based on your hint in the following thread:
https://github.com/mozilla/pdf.js/issues/2371 (please note that the error I got in this case was: [an error occurred while processing this directive])

I don't know Yury, but seems many beginners, face the same issue. I mean, I strongly believe that there is an easy way just like in the following example (mentioned before), where you just upload the folders to get it working, it will be very helpful for me, as well as many others.
http://www.worldwidewhat.net/2011/08/render-pdf-files-with-html5/

I don't want to appear like putting my noise in other people business, but providing a very short tutorial of such for beginners, in the main Pdf.js page, would be very useful.

Regardless whether my problem is solved or not, I thank you all for your kind assistance.
All Best//
AliND

[yurydelendik]

For beginners there lots of things can go wrong. First thing I recommend to the beginners is to follow the README file, FAQs and advices provided in the issues. Was you able to setup node.js, clone project using git and build it? Did you try following my advice to use the git command above?

Deployment the pdf.js on the custom platform is out of scope of this project, however we will be glad to accept the detailed step-by-step instructions from the contributors/experts for particular platform (in form of wiki page). If you think we are missing something and you know how to solve the common case, please create a wiki page.

[timvandermeij]

@AliND It seems you are missing some files. The viewer on http://pdfjs.eu.pn/pdf.js/web/viewer.html seems fine to me, but the console claims that:

"NetworkError: 404 Not Found - http://pdfjs.eu.pn/pdf.js/build/compressed.tracemonkey-pldi-09.pdf"

i.e. the PDF file does not exist at that location. Place it there, and it should be fine.

The second link is not working because you are missing the following files:

"NetworkError: 404 Not Found - http://pdfjs.eu.pn/pdf2.js/external/webL10n/l10n.js"
l10n.js
"NetworkError: 404 Not Found - http://pdfjs.eu.pn/pdf2.js/external/jpgjs/jpg.js"
jpg.js
"NetworkError: 404 Not Found - http://pdfjs.eu.pn/pdf2.js/external/webL10n/l10n.js"
l10n.js
"NetworkError: 404 Not Found - http://pdfjs.eu.pn/pdf2.js/external/jpgjs/jpg.js"

Please check and make sure that the mentioned files can be found at that path. For what I can tell, that should do it. Tip: use the Firefox console (CTRL + Shift + K) to see the errors I mentioned above; they will help you track down any problems.

[timvandermeij]

@AliND http://pdfjs.eu.pn/pdf.js/web/viewer.html is now partially working because I added the PDF file to the build directory. The fact that this is needed might indicate something fishy happened during the build process. I'll look into it a bit more for you and hopefully give you better feedback.

[timvandermeij]

@AliND Here you go: http://pdfjs.eu.pn/pdf3.js/web/viewer.html

What I've done:

1. Download https://github.com/mozilla/pdf.js/archive/master.zip.
2. Extract it.
3. Upload the entire folder to the pdf3.js folder on your FTP account (I've left out two large test PDF files since they are not needed and the free FTP server was having some trouble with them).

Nothing special, so strange that it's working for me. The second link is definitely missing some folders, so that's why that didn't work. I have no clue as to why the first link is not working the way it should, but I'd guess the build of PDF.js wasn't entirely successfull.

Although this will work just nicely, I agree that it's better to build it instead of just unzipping it. I hope you can work with this for now. In the meantime, I'll try to build PDF.js myself and test it on your server. If I can get that working, I'll also post the steps and hopefully all problems will be fixed then :-)

[timvandermeij]

@AliND The built version is also working for me, though I admit I had to figure out a bit how it worked. I've never built PDF.js before, so I started with https://github.com/mozilla/pdf.js/wiki/Setup-PDF.js-in-a-website-%28Debian-Ubuntu%29#wiki-Setup_testing_environnement, but that didn't quite give me a good result. I did the following to get it working on your server (link here: http://pdfjs.eu.pn/pdf.js-build/web/viewer.html):

1. Set the correct line ending if you're on Windows like me: git config --global core.autocrlf input (before the next step, or step 3 will fail!).
2. Clone the repository from my fork, using git clone https://github.com/timvandermeij/pdf.js.git (but you should use the always up-to-date https://github.com/mozilla/pdf.js repository).
3. Run the make command: node make generic.
4. After that, I've ignored the rest of https://github.com/mozilla/pdf.js/wiki/Setup-PDF.js-in-a-website-%28Debian-Ubuntu%29#wiki-Setup_testing_environnement, since it didn't work for me. It wasn't copying the right files. What I did was go into the build/generic folder that was created by step 3 and upload the build and web folder to the web server. That did it.

I hope your problems are solved by following the steps I've provided here and in my previous comment. Good luck (and sorry for the wall of text!). :-)

@yurydelendik I also find the manual at https://github.com/mozilla/pdf.js/wiki/Setup-PDF.js-in-a-website-%28Debian-Ubuntu%29#wiki-Setup_testing_environnement slightly confusing. In the section From build to production for example, you copy a few files to a production directory, but pdf.js itself is not copied, causing a production directory with only the viewer files and not the core files. I have a feeling steps are missing there. Could you check that? I can also rewrite the wiki page using the steps above if you want, because I think that will be more clear for starters (or we need to extend the current wiki page with more steps to include the core files).

[yurydelendik]

@timvandermeij, so you followed instruction for ubuntu to setup it on windows? yeah, you will need a special environment for windows to do that (not easy to setup for beginner e.g. https://github.com/mozilla/pdf.js/wiki/Setting-up-pdf.js-Development-Environment-for-Windows). Yeah, the wiki is confusing, but an interest in "testing environment" already indicate are not a beginner. But yeah if you find it confusing and you found the right way, please make a change (but in case of windows it deserves another wiki page)

Added entry to the FAQs: https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#wiki-gh-pages

[timvandermeij]

@yurydelendik Thanks. I practically did the same on Windows as I would do on Arch Linux for example, but I'll take a shot at extending the wiki. :)

[timvandermeij]

@yurydelendik I've extended the Linux instructions page on https://github.com/mozilla/pdf.js/wiki/Setup-PDF.js-in-a-website-%28Linux%29 to fix the issues I experienced with it, and also to correct some textual mistakes. That page seems fine to me now. Later this day, I'll make the same type of page, but then focussed on Windows (which is currently a to-do item). Hopefully adding more instructions will cause less confusion amongst users. :)

Edit: here is the Windows version: https://github.com/mozilla/pdf.js/wiki/Setup-PDF.js-in-a-website-%28Windows%29

I hope you're happy with the changes made to the Linux and Windows pages of the wiki. I think they are easier to understand now, and now we also have documentation for Windows :)

[yurydelendik]

@timvandermeij thank you for doing that.

[AliND]

@timvandermeij : What you did is outstanding; thank you for every second you spent there. I am 100% sure that this will be useful for many others as well. Checking is in progress, I shall come back with the outcome very soon.

@yurydelendik : Many thanks for the input, seems that Tim has done it all!

Thanks again & all best//
AliND

[timvandermeij]

@AliND, @yurydelendik Very happy to help! I would indeed like to hear the outcome. :-)

[AliND]

@timvandermeij
Unbelievable, all what needed to be done was to insert the pdf file into the build folder!

The only needed folders are the web! and the build (with only the pdf.js & the pdf file to be built). Additionally, the locale folder (with locale.properties inside it, if we copy the file from github to local server) should be included in the web folder.

For this pretty easy, straight-forward method, credit goes to you @timvandermeij for guidance on where to put the pdf file (inside the build folder), and to @yurydelendik for figuring the GET.html problem.

http://pdfjs.eu.pn/pdffinal/web/viewer.html

But still there is one problem, it views perfectly in Firefox, Chrome, and Opera. For Explorer and Opera, however, there are two errors:
Safari: Missing PDF "sample.pdf". But still, the loader works fine!
Explorer: just the style, nothing loads!

I mean, I feel like it is strange because the compatibility.js is there, and I wonder what could cause this behavior for these browsers. Anyways, I have also uploaded all the other files and folders but didn't have luck!.

@timvandermeij: If I use your method, and upload the whole folder like I did before, I get the following error in the following link. Kindly note that, no matter whether I extract and upload or upload and extract -> same problem. Besides, pdf.js-master.zip & mozilla-pdf.js-v0.5.5-1283-gc682c25.zip are the same files, so I wonder why two at a time.

I just don't understand why! I have even downloaded the folder pdf3.js you uploaded, reuploaded it again! and still, it doesn't work!

I mean, what I am really concerned about is the reason for which it is not working with the two other browsers!

Any ideas?

[AliND]

@timvandermeij I have installed GIT and run into different sort of problems. Thus, I would rather focus on first solution. I wonder if you can provide me with answers to the two following questions:
1- Is there a reason for which the link, I posted in my previous post, is not working in IE & Safari?
2- When you uploaded the master folder, did you make any modifications afterwards?

Thanks again - I appreciate your help as well as @yurydelendik 's help.

All Best,
AliND

[AliND]

@timvandermeij @yurydelendik

I got it working, Thanks Tim - I used Safari element inspector this time and for some reasons, it is directing toward web/sample.pdf instead of build/sample.pdf. Same goes for Internet Explorer! Kindly note the internal links in the pdf file doesn't work in IE but this is not a problem.

Without any doubts, the build method is the correct one although one can create separate viewer.js for each pdf file.

Now if you go to http://pdfjs.eu.pn/pdffinal/web/viewer.html , it works in all the 5-mentioned browsers. (note: sometimes, the browsers can't find some files on this free server, but on the paid server - it works without any problems).

For future users, an easy way is:
1- Clone http://mozilla.github.io/pdf.js/web/viewer.html (you can use HTTrack).
2- You will have two folders: web & build (the later will have pdf.js which is the most important - HTTrack in this case, combine all the build actions into this file)
2- Open the pdf.js (build folder) and change GET.html to GET
3- Open viewer.js (web folder) and change the name of the pdf file to your own.
4- Put your pdf file in both the web (Safari & IE) & build folders (other browsers) (you can alter a bit, put the pdf.js in the web folder, then there wouldn't be need to include the same pdf twice, but this might require some work!)
5- Upload
6- It should be working now! note that this method might have flaws which I am unaware of.

@timvandermeij I just don't understand why it doesn't work when I upload the master folder!, because in your case, it worked flawlessly!

Anyways, many thanks for your kind help and support, and I would say it again, as per @yurydelendik & @timvandermeij instructions, "the correct method" is the build one; but since I am finance researcher - I can't really dig deep into the matter for time issues.

Thanks again and all - all best//
Ali

[timvandermeij]

@AliND Nice that you got it working! Indeed, the build way is the best way to go, but the other method should also work fine. I did nothing else but download the ZIP file and extract it on the server. No other modifications. It worked flawlessly, so it's strange that it didn't work for you. However, the most important thing is that you got it working in all browsers for your purpose.

Also thanks for placing your steps here. It might help future users that still experience trouble with the updated wiki pages. The way described on the wiki pages is definitely the way to go and is a working method, but if for some reason it doesn't work for someone, your steps might serve as help.

I do not know how a wrong link to a PDF file can only break Safari and IE, and not the other browsers. Perhaps there is a problem with that free account, I cannot tell.

Glad that you got it working and all the best indeed! :-)

[timvandermeij]

@AliND Additionally, note that adapting viewer.js is not the best way to go. You can load other files using the file parameter in the URL, as described in https://github.com/mozilla/pdf.js/wiki/Setup-PDF.js-in-a-website-%28Linux%29#opening-pdf-files-from-your-website. That way, you can use one viewer.js file and still open all the PDF files you want.

[AliND]

@timvandermeij Many thanks again :)

Actually, your method works perfectly on the free server; I just tried it but seems that I have the problem with the paid server this time! I have just opened a support ticket so they can look up into the issue.

So for future users also, and aside from the build method, what @timvandermeij did works perfectly and it is much easier than the previously mentioned method. For reference:
1- Just download the master zip file, either extract it and upload, or upload and extract if the control panel allows for this (the second method is much faster). Of course, there are some files and/or folders not needed, but just upload the whole thing :D.
2- Open the viewer.js (in web folder) and change the name of the pdf file to your own. Upload (reupload) this viewer.js
3- Upload your pdf file (with the name specified in step 2) to the web folder.
4- Done (If it doesn't work, it means there is a problem with your host; try a free host and see for yourself).

Thanks again Tim :)
All Best//
Ali

[AliND]

Wow, the file method is indeed very helpful! :)

@timvandermeij you have provided a one-stop complete solution :)

Thanks again & again and all best//
AliND

[xiaotun]

Hi
In my project , I need to load the pdf page to an iframe, so I used the file_get_contents php function to get viewer.html's contents. But there is error when load pdf
PDF.js v? (build: ?)
Message: InvalidPDFException
the console is as bellow,
Error: Invalid XRef stream header util.js:186
at error (http://bacchus.weibo.com:8080/js/pdfjs/src/shared/util.js:188:15)
at Object.XRef_readXRef as readXRef
at Object.XRef_parse as parse
at Object.PDFDocument_setup as setup
at Object.PDFDocument_parse as parse
at http://bacchus.weibo.com:8080/js/pdfjs/src/core/pdf_manager.js:106:26
at LocalPdfManager_ensure as ensure
at LocalPdfManager.BasePdfManager_ensureDoc as ensureDoc
at http://bacchus.weibo.com:8080/js/pdfjs/src/core/worker.js:54:22
as I'm fresh in javascript, I can't understand why this happened, is there anyone can help me ?

[timvandermeij]

@xiaotun The PDF file seems to be corrupt. Please open a new issue and provide more details such as OS name/version, PDF.js version and browser name/version.

[GuitarHero1969]

I'm getting Warning: TT: undefined function: 32 in the console.

Could not load source 'VM_Unknown': Could not retrieve content.. VM_Unknown:1
@types/pdfjs-dist could be the problem but it appears in my angular app as a tgz file in a url !!!

The pdf is rendered in the Browser ok, but the form inputs are not there!

I've tried to follow this tutorial:
https://medium.com/factory-mind/angular-pdf-forms-fa72b15c3fbd