Pdfjs Using Tutorials

Pdf.js framework of the charm, for its implementation for the HTML5, without any local support, and browser compatibility is also better, requires only one: Browser support HTML5! (But for the lower version of IE, you can only my condolences!) ）

It is said that IE9 above is OK, because my local is IE11, so I only tested on the IE11, is through (of course, Firefox, 360, I also measured, is OK).

Because the project development needs, online display PDF, and to be compatible with IE, so chose Pdf.js, but the online tutorial on his few, I took a day to fix, looked back a bit, also did not imagine so difficult, so decided to write a blog , so that everyone reference!

The following are the Pdf.js related URLs:

Git hub:https://Github.com/mozilla/pdf.js/

Above this site, have pdf.js basic introduction, and how to get the source code, then how to build!

But his access to the source code uses:

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

Build using:

$ node Make generic

I do not know how to use Git, node on Windows7 (if you know, you can tell me, thank you here!). , so I switched to Linux to build (during a lot of sad course, feel can be made into a movie!!!) For example, I use git to get the source code, the system prompts me git does not install, I use node, prompt me Shelljs not install, install Shelljs, he told me to use NPM, unsurprisingly, NPM I did not install ... In fact, we use pdf.js, ultimately only need to build the content, you can download here:

------------------------------------------Split Line------------------------------------------

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

User name and password are www.linuxidc.com

Specific download directory in/2015 information/June/12th/pdf.js Use tutorial /

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

------------------------------------------Split Line------------------------------------------

The constructed directory structure is:

With the built-in build content, we can do a simple test to copy the generic into Tomcat's WebApps

Using the tutorial "width=" 581 "vspace=" 5 ">

After you start Tomcat, you can go through:

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

To visit! Can see a very handsome interface:

Using the tutorial "width=" 581 "vspace=" 5 ">

Generic/web/viewer.html is mainly about rendering the PDF reader, while Generic/web/viewer.js is specifying the open PDF file (and of course there are other features that are not our concern), and we look at the generic/ Web/viewer.js section of code:

Using the tutorial "width=" 581 "vspace=" 5 ">

As we can see, he opens the Generic/web/compressed.tracemonkey-pldi-09.pdf file by default and looks at the following code:

Using the tutorial "width=" 581 "vspace=" 5 ">

This tells us that you can dynamically specify an open PDF file by passing the file parameter! Such as:

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

Below I introduce, the concrete embed project is how to use!

The content in generic can be used as a third-party plug-in, which can be stored in the project as follows:

Using the Tutorial >

Then the page can be used

As follows:

Using the tutorial "width=" 581 "vspace=" 5 ">

The essence is that we directly access the generic/web/viewer.html and then assign it a file parameter that specifies the open PDF file! I use the flow above to specify the way.

The above is just a simple way to use, the following describes the use of a complex point:

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-4154-aafd-afdbee5bcb65

We in the actual application, may choose to display the different PDF file according to the different parameter, at this time involves the question of the transfer parameter, the careful observation above this URL address will discover, in the file request parameter The value is a URL address, and this URL address has appended own request parameter, This causes 2 "?" to appear in a URL address.

Causes the browser to not parse this section of url! correctly

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

At this point, you can ask the encodeURIComponent () function to appear! Because it is a JS function , it is necessary to dynamically set the SRC value for the IFRAME in the document-ready function as follows:

<%@ page C/HTML;CHARSET=GBK "language=" java "%>
<%@ taglib prefix= "C" uri= "Http://java.sun.com/jsp/jstl/core"%>

Since there is coding, then must have decoding to parse him, but this work generic/web/viewer.js has done for us, as follows:

Using the tutorial "width=" 581 "vspace=" 5 ">

At this point, the introduction of Pdf.js plug-in is over, the first time to write a blog , if there is no place, I hope you can advise, thank you!

Thanks to Pdf.js's two authors here! (sincerely admire these foreign masters, 2 people can write a good framework, but also open-source!) ）。

This article permanently updates the link address : http://www.linuxidc.com/Linux/2015-06/118728.htm

The above describes the use of PDFJS tutorial, including aspects of the content, I hope that the PHP tutorial interested in a friend helpful.

