pdfjs usage tutorial

The charm of the pdf.js framework is that it is implemented for HTML5, does not require any local support, and has relatively good compatibility with browsers. There is only one requirement: as long as the browser supports HTML5! (But for lower versions of IE, I can only express my condolences!)

It is said that IE9 and above are OK, because my local is IE11, so I only tested it on IE11, and it passed (of course Firefox, 360, I also I tested it and it’s OK).

Because of the need for project development, PDF should be displayed online and compatible with IE, so I chose pdf.js. However, there are very few tutorials on it online. It took me a day to get it done. After looking back, it was not what I expected. It’s so difficult, so I decided to write a blog for everyone’s reference!

The following is the URL related to pdf.js:

GitHub: https://Github.com/mozilla/pdf.js/

The above URL has a basic introduction to pdf.js, and How to get the source code and then build it!

But he uses:

$ Git clone Git://Github.com/mozilla/pdf.js.Git

Build using:

$ node make generic

I don’t know how to use Git and node on Windows 7 (if you know, you can tell me, thank you!), so I switched to linux to build (there were a lot of sad experiences during this period, but I think it’s okay) It was made into a movie!! For example, when I used Git to get the source code, the system prompted me that Git was not installed. When I used node, it prompted me that ShellJS was not installed, and he told me to use npm. , I didn’t install npm...), in fact, we use pdf.js, and in the end we only need the built content. You can download it here:

------------- -----------------------------Dividing line------------------- -----------------------

The free download address is at http://linux.linuxidc.com/

The username and password are both www.linuxidc .com

The specific download directory is /2015 information/June/12th/pdf.jsUsage tutorial/

For the download method, please see http://www.linuxidc.com/Linux/2013-07/87684. htm

---------------------------------------------Separating line--- ---------------------------------------

The directory structure after construction is:

With the built build content, we can do a simple test and copy the generic to Tomcat's webapps

After starting Tomcat, you can go through:

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

Make a visit! You can see a very handsome interface:

generic/web/viewer.html mainly renders 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 What we care about), let’s look at a piece of code located in generic/web/viewer.js:

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

This tells We can dynamically specify the opened pdf file by passing the file parameter! For example:

http://localhost:8080/generic/web/viewer.html?file=qbs.pdf

Now I will introduce how to use it in the specific embedded project!

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

Then the page can use the

The rendering is as follows:

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

The above is just a simple way to use it. Here is a more complicated way to use it:

I don’t know 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-4154-aafd-afdbee5bcb65

We are actually In the application, different PDF files may be selected to display based on different parameters. At this time, the problem of passing parameters is involved. If you carefully observe the above URL address, you will find that the value in the file request parameter is a URL address. , and this url address has its own request parameters appended, which results in 2 "?" appearing in a url address

, causing the browser to be unable to parse this url normally!

One solution is: we can encode the value of the file parameter first, and then decode it to solve this problem!

At this point, you can ask the encodeURIComponent() function to appear! Because it is a js function, you need to dynamically set the src value for the iframe in the document ready function, as shown below:

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

                                                                                                                                      /div>

Since there is encoding, there must be decoding to parse it. However, generic/web/viewer.js has already done this for us, as shown below: