Open a variety of plugins to browse PDF files online

Source: Internet
Author: User
Tags pdfobject

A practical jquery plugin for viewing PDF files online

Read Catalogue

    • Pdfobject
    • Pdf.js
    • Jspdf
    • JQuery Media Plugin
    • Google Docs PDF Viewer
    • ZOHO Viewer
    • Anychart: Exporting PDFs using JavaScript
    • JQuery Document Viewer

In web development we often need to browse the PDF content online, embedded dynamic PDF online, the traditional solution to install the client PDF Reader, if it is in Google can be viewed online, because he has brought some plug-ins, previously encountered such problems are often time-consuming and laborious, very difficult to solve,

Today, we will share a series of PDF plugin effects using JavaScript, which is very useful without the help of a third-party plug-in to achieve online browsing.

Pdfobject

Pdfobject can help you embed PDF files directly on the page, and sometimes some projects need to embed PDF files dynamically. Pdfobject For this purpose, he is able to embed PDF files quickly and easily, pdfobject use JavaScript to produce the same standards-compliant markup, and then insert the selection into your HTML elements. You can fill the entire browser window, or convert the PDF format into a

or other block-level elements. Back to top of pdf.js

Unlike the closed source PDF Browsing plugin that Google Chrome uses from Foxit, Pdf.js is an open source product based on open HTML5 and JavaScript technology .

Pdf.js is a small plug-in that is primarily used to read PDF documents online on the HTML5 platform, written on JavaScript-based technology without any local technical support.

Pdf.js was released by Mozilla Labs. Their goal is to create a common, standards-based web platform that can parse and render PDF files and eventually publish a PDF reader extension, without a doubt pdf.js will be integrated into Gecko as an embedded PDF reader for Firefox, but the specific integration schedule has not yet been determined

Back to top of jspdf

Jspdf is an open source library that generates PDFs using JavaScript language. You can use it in Firefox plugins, server-side scripts, or browser scripts. Client Safari and IPhone Safari support the best, followed by opera and Windows Firefox 3 and so on. IE temporarily does not support:

Back to the top of jquery Media Plugin

jquery Media plugin is a jquery-based web Media Player plugin that supports most network multimedia players and multimedia formats such as: Flash, Windows Media Player, Real Player, Quicktime, Mp3,silverlight, PDF. Based on the current script configuration, it automatically replaces the a tag with a Div, generates an object, embed even an IFRAME code, and generates an object or Embed,jquery media automatically based on the current platform, so compatibility is excellent . The following code is generated by jquery media.

Back to top Google Docs PDF viewer

Back to top of Zoho Viewer

Back to top Anychart: exporting PDFs using JavaScript

You can export a static image or an embedded still image in PNG or JPG format, a chart or a fully interactive function diagram

Back to top jquery Document Viewer

The document viewer is a jquery plugin that allows you to view multiple file formats directly in a Web page. Document Browser supported file formats: PDF files, text files, code, images, audio, video, etc.

From: http://www.cnblogs.com/58top/archive/2012/11/26/a-list-of-jquery-pdf-viewers-available-at-the-moment.html

1

Two scenarios: a direct link to the PDF file as an img file, similar to <a href= ""/> This form, so link:

The code is as follows:

<frame src= "Address of PDF file" ></iframe> <div>
<p>ms pptx</p>
<section>
<iframe src= '
https://onedrive.live.com/view.aspx?resid=24f6446bd2944f19!15865&ithint=file%2cppt&app=powerpoint& authkey=! Ano6z2jumcrspm4 ' Width= ' 610px ' height= ' 367px ' frameborder= ' 0 ' >
This was an embedded
<a target= ' _blank ' href= ' http://office.com ' >microsoft office</a>
Presentation, powered by
<a target= ' _blank ' href= ' http://office.com/webapps ' >office online</a>.
</iframe>
</section>
</div>



Another: Use JS plugin ha.
There are many JS plugins for reading PDF files, such as: Pdf.js: is a technical prototype mainly used to display PDF documents on the HTML5 platform without any local technical support; Jspdf: an open source library that uses JavaScript to generate PDFs (IE is not supported);
A simple and easy-to-use JS plugin: pdfobject.js, a JavaScript library for dynamically embedding PDF documents in HTML.
The effect is as follows:

Pdfobject:A JavaScript Library for dynamically embedding PDFs in HTML documents. Modeled after SWFObject.
Pdfobject.js tenet: Sometimes you need a little JavaScript. When you do, try Pdfobject.
Let's look at the Little JS code:

The code is as follows:

<script type= "Text/javascript" >
Window.onload = function () {
var success = new Pdfobject ({URL: "Sample.pdf"}). Embed ();
};
</script>

OK, that's it. Just write the address right.
What if I load a pdf in a div? Crossing net http://pdfobject.com/, found that the embed () method can have parameters, no parameter refers to the body, there is a specific position parameter.

The code is as follows:


<script type= "Text/javascript" >
Window.onload = function () {
var success = new Pdfobject ({URL: "Sample.pdf"}). Embed ("div id");
};
</script>

Of course, you can further set the parameters, such as how many seconds you want to preview the speed, there is CSS, no CSS, etc.

Xxxxxxxxxxxxxxxxxxxx

Xxxxxxxxxxxxxxxxxxxxxxxxxxxx

Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Open a variety of plugins to browse PDF files online

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.