Home PC Games Linux Windows Database Network Programming Server Mobile  
           
  Home \ Linux \ pdf.js Tutorial     - Apache Spark1.1.0 deployment and development environment to build (Server)

- Lsblk command lists using Linux block device information (Linux)

- Ubuntu treated with cue file to ape and wav files automatically track points (Linux)

- Linux, MySQL / MariaDB Galera Cluster Setup Process (Database)

- How to modify the SQL Server auto-increment value and the corresponding solution (Database)

- Four Methods of Self - Learning Linux (Linux)

- The Linux OOM Terminator (Server)

- How to generate Linux, random password encryption or decryption (Linux)

- Enterprise-class GitHub warehousing environment build (Server)

- Linux kernel VLAN study notes (Programming)

- To install the Ubuntu Touch emulator on Ubuntu (Linux)

- MongoDB Learning the notes (Database)

- VirtualBox virtual machine can not start to solve under Ubuntu (Linux)

- Linux Security and Optimization (Linux)

- Difference in MySQL VARCHAR and CHAR data format (Database)

- Mounting kit under Fedora Linux (Linux)

- Applications Linux leap second problem caused (Linux)

- Ubuntu and derivatives installation Atom 0.104.0 (Linux)

- List Leaves (Programming)

- Linux common network tools: ping host sweep (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!
     
         
         
         
  More:      
 
- Linux / Raspberry Pi using the following command-line based web browser (Linux)
- PostgreSQL procedural language learning (Database)
- 22 Port weak passwords and SSH connection program of the Linux server (Linux)
- Install VMware Tools in Debian (Linux)
- Configuring Haproxy log support (syslog logging support) (Server)
- Source code is installed MySQL 5.6.28 (Database)
- Ubuntu installation module Python rq (Linux)
- MariaDB 10.0.X, the dynamic column support JSON format to obtain data (Database)
- Lazarus for Raspbian installation (Linux)
- Ubuntu 15.04 installation MATE 1.10 (Linux)
- Solve ORA-01012: not logged on (Database)
- How to install web crawler tool in Ubuntu 14.04 LTS: Scrapy (Linux)
- Make command Detailed Tutorial (Programming)
- Briefly explain the invasion of the four-level denial of service attack DoS Linux server (Linux)
- How to force Linux users to change the initial password the first time you log in (Linux)
- Java Learning: elegant string (Programming)
- Linux command line to put on your coat GUI (Linux)
- Java data structures - the linear form of the single-chain applications (Programming)
- How to allow users to access only a specific database (MSSQL) (Database)
- Recovery from MySQL master data consistency summary (Database)
     
           
     
  CopyRight 2002-2022 newfreesoft.com, All Rights Reserved.