In a simple example such as the above, if you use the Firefox DevTools to examine document.domain in both the main page and in the iframe, I found that document.domain is pdf.js for the PDF.js renderer—so the browser's cross-origin restrictions are kicking in. Create a container to hold your PDF Tell PDFObject which PDF to embed, and where to embed it.
Table of Contents.ZOHO – jQuery Viewer pluginThe ZOHO Viewer is an embeddable browser-based viewer that requires only a URL to a file available online. This need user account just like Google Docs Viewer, bypasses the need for users to have compatible software on their machines for those file types and displays the document right in the browser. ZOHO viewer supports for viewing the doc, docx, xls, xlsx, ppt, pptx, pps, odt, ods, odp, sxw, sxc, sxi, wpd, pdf, rtf, txt, html, csv, tsv files it supports linked to by anchor tags.
Hello World Walkthrough
PDF.js heavily relies on the use of Promises. If promises are new to you, it’s recommended you become familiar with them before continuingon.
This tutorial shows how PDF.js can be used as a library in a web browser.examples/ provides more examples, including usage in Node.js (at examples/node/).
Document
The object structure of PDF.js loosely follows the structure of an actual PDF. At the top level there is a document object. From the document, more information and individual pages can be fetched. To get thedocument:
Remember though that PDF.js uses promises, and the above will return a
PDFDocumentLoadingTask
instance that has a promise
property which is resolved with the documentobject.Page
Now that we have the document, we can get a page. Again, this usespromises.
Rendering the Page
Each PDF page has its own viewport which defines the size in pixels(72DPI) and initial rotation. By default the viewport is scaled to the original size of the PDF, but this can be changed by modifying the viewport. When the viewport is created, an initial transformation matrix will also be created that takes into account the desired scale, rotation, and it transforms the coordinate system (the 0,0 point in PDF documents the bottom-left whereas canvas 0,0 istop-left).
Alternatively, if you want the canvas to render to a certain pixel size you could do thefollowing:
Interactive examples
Hello World with document load errorhandling
The example demonstrates how promises can be used to handle errors during loading.It also demonstrates how to wait until page loaded andrendered.
Hello World using base64 encodedPDF
The PDF.js can accept any decoded base64 data as anarray.
Previous/Next example
The same canvas cannot be used to perform to draw two pages at the same time –the example demonstrates how to wait on previous operation to becomplete.