Pdf. js tutorial

Pdf. js tutorial

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 as difficult as I thought. So I decided to write a blog for your reference!

The following are URL related to pdf. js:

GitHub: https://github.com/mozilla/pdf.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:

$ Git clone git: // github.com/mozilla/developer.js.git

Build and use:

$ Node make generic

I don't know how to use git and node on Windows 7. (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, when I use git to obtain the source code, the system prompts me that git is not installed. When I use node, it prompts me that ShellJs is not installed and ShellJS is installed. He told me to use npm. expected, 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.bkjia.com/

The username and password are both www.bkjia.com

The specific download directory is available at/July 15,/July 12/pdf. js User Guide/

For the download method, see

------------------------------------------ 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.

After starting Tomcat, you can use:

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

Access! You can see a very handsome interface:

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:

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

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:

Then, you can use the <iframe> label to load the pdf file.

<Iframe src = "<c: url value ="/resources/plugin/pdfJs/generic/web/viewer.html "/>? File = <c: url value = "/publicity/displayPDF. do"/> "width =" 100% "height =" 800 "> </iframe>

, As follows:

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 is a js function, you need to dynamically set the src value for iframe in the ready function of the document, as shown below:

<% @ Page contentType = "text/html; charset = GBK" language = "java" %>
<% @ Taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<Script type = "text/javascript">
$ (Function (){
$ ("# DisplayPdfIframe"). attr ("src", '<c: url value = "/resources/plugin/pdfJs/generic/web/viewer.html"/>? File = '+ encodeURIComponent (' <c: url value = "/displayPDF. do? Id = $ {id} "/> '));
});
</Script>
<Div class = "ctrlDiv">
<Div class = "eleContainer elePaddingBtm">
<Iframe id = "displaypd1_rame" width = "100%" height = "100%"> </iframe>
</Div>
</Div>

Since there is encoding, We must decode it to parse it. However, this job has been done for us by generic/web/viewer. js, as shown below:

At this point, the introduction of the pdf. js plug-in has come to an end. If this is the first time I write a blog, I hope you can leave it blank. Thank you!

Thanks to the two authors of pdf. js! (I really admire these foreign masters. Two people can write such a good framework and it is still open-source !).

This article permanently updates the link address: