pdf.js
I am considering using pdf.js (an open source tool that allows embedding of a pdf in a webpage). There isn't any documentation on how to use it.
I assume what I do is make an html page with the script referenced in the header, and then in the body, I put some sort of function call with an array of the file name and location. Can anyone help me out here?
Source: (StackOverflow)
I'm using pdf.js and the included viewer to display pdfs on my website.
I added a menu to the viewer, where users can choose a specific bookmark of different pdf files.
If a users is clicking on a menu item the file should be opened and jumping to a specific page.
So far I managed it to open a new pdf file but I didn't find a way to open it at a specific page. I tried it this way:
PDFView.open(src + "/" + dest.file);
PDFView.page = dest.page;
I know, I can use the #page= hashtag when opening the viewer for the first time, but that's not working when I'm loading other files after the viewer is already opened.
Is there any why to solve this problem? Maybe something like a event-listener I can call after the new file is successfully loaded, so I can jump to the page?
Source: (StackOverflow)
I've been trying to get the helloworld example for pdf.js to run in Meteor. So far I have:
I thought this was enough to have the example working, but Meteor ends up complaining about the "!DOCTYPE html" declaration in pdf.js, which doesn't exist inside the file, so I am guessing that it gets imported from somewhere.
It feels like I'm missing something obvious to get this working, is there an easy solution for this?
(Aside: I am aware of the pdf.js smart package, but since I am doing development on Windows it's not really an option for me because I can't get Meteorite. Although I figure that since a smart package already exists, it's quite doable get the two to work together.)
Source: (StackOverflow)
I'm using PDF.js for rendering my documents on a web app I'm working on.
However I need to enable pinch to zoom on mobile devices for this and it doesn't look like the library itself allows native zooming.
Is there a library that I could use to the code to simulate (at the very least) pinch and zoom on the same scale as the viewers dropdown zoom selection?
Source: (StackOverflow)
I know of a similar question to this one: Pdf.js: rendering a pdf file using a base64 file source instead of url. That question was awesomely answered by Codetoffel but my question is different in that my PDF is retrieved via a RESTful call to my Web API implementation. Let me explain...
First, here's a basic way to use PDF.JS to open a PDF via a URL:
PDFJS.getDocument("/api/path/to/my.pdf").then(function (pdf) {
pdf.getPage(1).then(function (page) {
var scale = 1;
var viewport = page.getViewport(scale);
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
page.render({canvasContext: context, viewport: viewport});
});
});
This works great, but I am using Angular and its $resource service to make the request for the PDF via my RESTful Web API. I do know that PDF.JS allows me to replace passing the URL as a string in the PDFJS.getDocument method (above) with a DocumentInitParams object, which is defined here. Using the DocumentInitParams object works as follows:
var docInitParams = {
url: "/api/path/to/my.pdf",
httpHeaders: getSecurityHeaders(), //as needed
withCredentials: true
};
PDFJS.getDocument(docInitParams).then(function (pdf) {
...
});
This also works, but it works around my Angular $resource by requiring me to construct the api URL. But that's OK because PDFJS allows me to give it the PDF data directly, instead of giving it a URL to the PDF, as follows:
var myPdf = myService.$getPdf({ Id: 123 });
//It's an Angular $resource, so there is a promise to be fulfilled...
myPdf.$promise.then(function() {
var docInitParams = {
data: myPdf
};
PDFJS.getDocument(docInitParams).then(function (pdf) {
...
});
});
This is the one I can't seem to get to work. I can tell the myService.$gtPdf method to return the data as a blob or as an arraybuffer but neither works. I've tried to convert the arraybuffer returned data to an Uint8Array too, but to no avail.
I'm not sure what else to try and could really use a tip.
How do I get the data returned from my service to work with PDFJS?
Thanks in advance.
Source: (StackOverflow)
I've set firefox to my standard pdf viewer because I've had mostly good experiences with pdf.js.
Unfortunately, some pdfs won't open and the "save as" dialog ins displayed instead. Why does this happen and how can I fix it?
Source: (StackOverflow)
I use pe:documentViewer for display documents and set 'locale' like pt (pt_pt, pt_br, pt-pt or pt-br) but nothing happens and the actions continues in english. why?
My code is:
<pe:documentViewer locale="pt" height="#{previewHeight}" value="#{previewComponent.file}"/>
Source: (StackOverflow)
I want to put a file sample.pdf on my website, and want it to be displayed using pdf.js. What I want is to display my own file like the demo, with a toolbar, zooming in/out, etc. So far I can't do that yet.
I did check out the helloworld example, but it simply shows the file like an image, without toolbar, zooming in/out, etc. When I put another file with many pages instead of helloworld.pdf, it just shows the first page.
Source: (StackOverflow)
I am creating a pdf document (via ColdFusion), but when I preview the rendered pdf in Firefox, I get the number "4" where my checkmarks are supposed to be (see photo below). When I preview the exact same pdf in Chrome or IE, I see the checkmark, and it all works perfectly!
I am pre-populating the pdf form fields (via ColdFusion session variables), and then rendering the pdf using the following markup:
<cfpdfform source="82040.pdf" action="populate">
<cfpdfformparam name="org" value="">
</cfpdfform>
Here is the resulting pdf form in Internet Explorer:
Note how the checkmark is rendered properly:
Here is the same form previewed in FireFox:
Note how the the checkbox has a "4" instead of a checkmark:
Any help would be greatly appreciated!
Source: (StackOverflow)
I'm currently using pdf.js for my project for rendering pdf Now there is this tricky task to highlight a section of pdf page given the co-ordinate
example
given a boundary section like [(31,35),(40,35),(40,40),(31,40)] I should highlight the given section with nay primary color of choice
How to write a javascript to actually using pdf.js api to accomplish this task
Is it possible or am I sounding over ambitions
Source: (StackOverflow)
I created an html file with content as below
index.html
<html>
<head>
<script type="text/javascript" src="./pdf.js"></script>
<script type="text/javascript" src="./hello.js"></script>
</head>
<body>
<canvas id="the-canvas" style="border:1px solid black;"/>
</body>
</html>
hello.js with content
PDFJS.disableWorker = true;
var pf = PDFJS.getDocument('./helloworld.pdf')
pf.then(function(pdf) {
pdf.getPage(1).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
//
// Prepare canvas using PDF page dimensions
//
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// Render PDF page into canvas context
//
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
But the pdf is not shown correctly when I point the browser to index.html.
I want the user to be able to select a pdf file on his computer and show that pdf in browser window.
Source: (StackOverflow)