Pdfjs User Guide

: This article mainly introduces the tutorials for using JavaScript. For more information about PHP tutorials, see. The charm of the pdf. js framework is implemented for HTML5, without any local support, and the browser compatibility is also good. there is only one requirement: The browser supports HTML5! (However, for earlier versions of IE, we can only mourn !)

It is said that IE9 and above are OK, because I use IE11 locally, so I only tested it on IE11 and passed it (of course Firefox, 360, I also tested it, yes ).

Because the project development needs to display PDF online and be compatible with IE, pdf is selected. js, but there are few tutorials on him on the internet. it took me a day to get it done. I looked back and thought it was not that difficult, so I decided to write an article.BlogFor your reference!

The following are url related to pdf. js:

GitHub: https ://GitHub.com/mozilla/developer.js/

The above URL provides a basic introduction to pdf. js and how to obtain the source code and build it later!

However, the following code is used to obtain the source code:

$GitCloneGit://GitHub.com/mozilla/developer.js.Git

Build and use:

$ Node make generic

I don't know how to use it on Windows 7.Git, Node (if you know, please let me know, thank you !), So I used linux to build it. during this period, I had a lot of sad experiences and I felt like I could make a movie !!! For example, I usedGitWhen getting the source code, the system prompts meGitNo installation. when I use node, I am prompted that ShellJs has not been installed and ShellJS has been installed. He told me to use npm. unexpectedly, I have not installed npm ...), in fact, we use pdf. js, you only need to build the content, you can download it here:

------------------------------------------ Split line ------------------------------------------

Free in http://linux.linuxidc.com/

The username and password are both www.linuxidc.com

The specific download directory is available at/July 15,/July 12/pdf. jsTutorial/

Download method see http://www.linuxidc.com/Linux/2013-07/87684.htm

------------------------------------------ Split line ------------------------------------------

The directory structure after the build is:

With the build content after the build, we can perform a simple test to copy the generic to Tomcat's webapps.

Tutorial"Width =" 581 "vspace =" 5 ">

After starting Tomcat, you can use:

Http: // localhost: 8080/generic/web/viewer.html

Access! You can see a very handsome interface:

Tutorial"Width =" 581 "vspace =" 5 ">

Generic/web/viewer.html is mainly used to render the style of the pdf reader, while generic/web/viewer. js specifies the opened PDF file (of course there are other functions, but these are not our concerns). we can see that they are located in generic/web/viewer. javaScript code:

Tutorial"Width =" 581 "vspace =" 5 ">

We can see that he opens the generic/web/compressed.tracemonkey-pldi-09.pdf file by default, and then look at the following code:

Tutorial"Width =" 581 "vspace =" 5 ">

This tells us that you can dynamically specify the opened PDF file by passing the file parameter! For example:

Http: // localhost: 8080/generic/web/viewer.html? File1_qbs.pdf

Next I will introduce how embedded projects are used!

You can use the content in generic as a third-party plug-in, and store the content in the project as follows:

Tutorial">

Then the page can be used

, As follows:

Tutorial"Width =" 581 "vspace =" 5 ">

In essence, we directly access generic/web/viewer.html and specify a file parameter for it to specify the opened PDF file! The stream method I used above is specified.

The above is just a simple method of use. The following describes a complex method of use:

I wonder if you have tried the following url request:

Http: // localhost: 8080/akane/resources/plugin/pdfJs/generic/web/viewer.html? File =/akane/displayPDF. do? Id = 966c6f0e-3c06-4404-aafd-afdbee5bcb65

In actual application, we may choose to display different PDF files based on different parameters. in this case, the problem of passing parameters is involved. carefully observe the above url and we will find that, the value in the file request parameter is a url address, and the url address is appended with its own request parameter, which causes two "? "

The browser cannot parse this url!

One solution is: we can encode the value of the file parameter before decoding to solve this problem!

Now, the encodeURIComponent () function is ready! Because it isJs functionsSo you need to dynamically set the src value for iframe in the ready function of the document, as shown below:

<% @ Page c/html; charset = GBK "language =" java "%>
<% @ Taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>