Home PC Games Linux Windows Database Network Programming Server Mobile  
  Home \ Linux \ pdf.js Tutorial     - Connect to the Oracle Database Help class (Database)

- OpenNMS compile under Linux (Server)

- C ++ Supplements - malloc free and new delete the same and different (Programming)

- Gentoo: startx problem appears Failed to load module (Linux)

- Hadoop 2.7.1 Installation and Configuration under RedHat Linux 6.5 (Server)

- MySQL high availability cluster fragmentation of deployment uses Cobar (Database)

- Linux remote wake the computer original code [C] (Linux)

- Ubuntu 14.04 Nvidia graphics driver installation and settings (Linux)

- Teach you how to protect the security of Linux desktop (Linux)

- Let the router be your security barrier against external attack (Linux)

- Oracle RMAN repair logical bad blocks (Database)

- Hadoop 1 and 2.x installation notes (Server)

- Systemd on RHEL7 (Linux)

- About redis in Replication (Database)

- Vim (Linux)

- How to network to share files between Windows, MAC and Linux (Linux)

- error no.2013 lost connection Tom with SQLServer during query (Database)

- Windows SmartGit installation (Linux)

- Linux --- process handle limit summary (Linux)

- To install Spotify in Ubuntu / Mint (Linux)

  pdf.js Tutorial
  Add Date : 2018-11-21      
  Where charm Pdf.js framework, as HTML5 for its realization, without any local support, and browser compatibility is relatively good, requires only one: The browser supports HTML5 just fine! (But for the lower version of IE, it can only be a grief!)

IE9 above is said to be OK, because I was local IE11, so I only tested on IE11 before, through the (Firefox of course, 360 I measured a bit, is possible).

Because the project development needs, online display PDF, but also compatible with IE, so we chose pdf.js, but few of his online tutorial, I spent a day to get it, looked back, did not imagine so difficult , so I decided to write a blog for your reference!

The following is pdf.js related URL:

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

This URL above, a basic profile pdf.js, and how to obtain the source code, and then how to build!

But his use Get the source:

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

Built using:

$ Node make generic

I do not know Windows7 on how to use git, node (if there is to know, you can tell me, in this thanked!), So I use linux build have a lot of sad history (during the feeling can be made into a movie For example, when I use the git! Get the source, the system prompts I did not install git, I use node when prompted me ShellJs not installed, install ShellJS, he told me to use npm, surprisingly, npm I did not install ...), in fact, we use pdf.js, you would only need to build content after

After the build directory structure is as follows:

With build content build later, we can do a simple test, the generic copy to the Tomcat webapps

After starting Tomcat, you can:

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

Visit! You can see a very handsome interface:

generic / web / viewer.html mainly style rendering pdf reader, while generic / web / viewer.js is designated open pdf file (of course there are other features, but these are not our concern), we look at is located generic / web / viewer.js piece of code:

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

This tells us, you can pass parameters to dynamically specify the file to open the pdf file! Such as:

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

Here I will introduce specific embedded in how the project is to use!

It can be generic in content as a third-party plug-ins used in the project can be stored as follows:

Then you can use the page < iframe > tag to load pdf

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

In essence, we have direct access generic / web / viewer.html, and then assign a file parameter to specify open pdf file! I streamed using the above specified.

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

I do not know if you have not tried this url request the following:

http: // localhost: 8080 / akane / resources / plugin / pdfJs / generic / web / viewer.html file = / akane / displayPDF.do id = 966c6f0e-3c06-4154-aafd-afdbee5bcb65??

 In practice, we may be based on different parameters, to choose to display a different pdf file, this time related to the question of the Senate, carefully observe the above paragraph url address will be found in the file parameter value request a url address, and the url address and added his own request parameters, which led to a url address appears in two "?"

Cause the browser can not properly resolve this url!

One solution is the idea: We can file parameter values to coding, decoding and then to solve this problem!

In this case, you can ask encodeURIComponent () function is played! Since it is a js function, the function needs to be ready for the iframe src dynamically set values in the document, as follows:

< % @ 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 ( ' '));

< Div class = "ctrlDiv" >
    < Div class = "eleContainer elePaddingBtm" >
        < Iframe id = "displayPdfIframe" width = "100%" height = "100%" > < / iframe >
    < / Div >
< / Div >

Since there coded, then it must be decoded to parse him, but this work generic / web / viewer.js has done for us the

Thus, the introduction pdf.js widget came to an end, for the first time to write a blog, if not in the hope that we can have educated us, thank you!
- Valgrind * not * leak check tool (Linux)
- RabbitMQ user roles and access control (Linux)
- How to Create a file can not be changed under Linux (Linux)
- Linux pwd command learning experience (Linux)
- Overall Physical Migration of Oracle Database with (Database)
- CentOS 7 - use cgroups limit process resource (Linux)
- Java exception handling mechanism (Programming)
- Python Basics: Search Path (Programming)
- Thinking in Java study notes - Generics (Programming)
- History and Statistics tuptime use tools to view Linux server system boot time (Server)
- awk pattern matching (Programming)
- To install Docker under CentOS7 (Linux)
- SSH automatic disconnection problem solving (Linux)
- DataGuard Standby backup error RMAN-06820 ORA-17629 to solve (Database)
- Shell Scripting Interview Questions (Programming)
- MySQL 5.7 can not log in problem (Database)
- CentOS 7 open ports (Linux)
- Linux crontab (Linux)
- Awk include binding capacity larger than the specified size of all files directory (Linux)
- To use Java arrays implement the order form (Programming)
  CopyRight 2002-2022 newfreesoft.com, All Rights Reserved.