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