pipwerks / pdfobject Goto Github PK
View Code? Open in Web Editor NEWA lightweight JavaScript utility for dynamically embedding PDFs in HTML documents.
Home Page: http://pdfobject.com/
License: Other
A lightweight JavaScript utility for dynamically embedding PDFs in HTML documents.
Home Page: http://pdfobject.com/
License: Other
I have a 255 page PDF doc, with 156 destinations marked in it. When someone picks a link to a particular destination, is there a way to cache the document instead of downloading it every time? It seems even if I go to the same destination twice I still see the file being re-downloaded. Any suggestions?
Thanks,
-Roman
<script type="text/javascript" src="js/pdfobject.min.js"></script>
<div id="pdf1" style="width:760px; height:700px;"></div>
<script type='text/javascript'>
function embedPDF(){
var myPDF = new PDFObject({
url: 'temp/record.pdf'
}).embed('pdf1');
// Be sure your document contains an element with the ID 'pdf1'
}
window.onload = embedPDF; //Feel free to replace window.onload if needed.
</script>
See http://support.microsoft.com/kb/293792
IE (6 and 8 I've tested) sends two requests for the pdf. The suggested solution:
<OBJECT CLASSID="clsid:CA8A9780-280D-11CF-A24D-444553540000" STYLE="height:100%; width: 100%" >
<PARAM NAME="src" VALUE="http://server/path/filename.pdf">
</OBJECT>
doesn't work in other browsers (Chrome, Firefox), so you need to do browser detection, so I've done this:
if (navigator.appName == 'Microsoft Internet Explorer') {
targetNode.innerHTML = '<object CLASSID="clsid:CA8A9780-280D-11CF-A24D-444553540000" width="' +width +'" height="' +height +'"><param name="src" value="' +url +'"></object>';
} else {
targetNode.innerHTML = '<object data="' +url +'" type="application/pdf" width="' +width +'" height="' +height +'"></object>';
}
Hi, nice object! only thing is that I would like to load a pdf in my div when a user clicks on a link without refreshing the browser. Something like:
myPDF = new PDFObject({ file }).embed('pdf_viewer');
myPDF({ url: new_file }).embed('pdf_viewer');
With new_file being the path, the first file is loaded but the second not. Tried it even like:
myPDF.url = 'new_file';
myPDF.embed('pdf_viewer');
Thanks!
Many server frameworks (such as spring) reject HEAD requests by default, causing the PDF document request to fail in IE9 and 10. Took me some time to chase this one down.
Even with the Adobe PDF addon enabled, PDFObject doesnt detect PDF support in IE11. It fails to create the activex control, and the PDF reader is not listed in the navigator.plugins or mimetypes.
Im using IE11 on a 64bit windows 7 machine.
Attempting to utilize this lib, I found URLs are having '%' transformed to '%25', making Amazon S3 authorizations fail. Is this a known issue and is there a work-around?
Thanks.
Hello,
I found this, well actually the outdated 1.2 on the main site, script and started inplementing it as it works more elegant on IE than my object data parameter replacement script which sometimes caused error about a .tmp pdf that could not be loaded.
Anyway...
All seemed to work fine till I bumped on an issue today.
One of my applications is sending an array of form settings to the pdf creation page.
It is being sent as data[]=value1&data[]=value2 etc.
The problem is this line
a=encodeURI(h.url)+"#"+q(g);
as it caused the query string to be data%5B%5D=value1&data%5B%5D=value2 the PHP file doesn't recognize it as an array anymore.
I had to change it to
a=h.url+"#"+q(g);
to bypass my problem.
I'm not sure if there is a more elegant method so that html enities and other codes get sent correctly aswell?
Any plan to support HTML5 embed tag? The object tag doesn't always work on mobile browsers.
When i try to use your example like ;
var myPDF = new PDFObject({
url: "pub/"+"CS-"+ID+"-quote.pdf",
pdfOpenParams: {
navpanes: 1,
toolbar: 1,
statusbar: 0,
view: "FitH"
}
}).embed("pdf");
it embeds the PDF fine in the html, but if I want to change the target of the embed to "pdf2" it doesn't work. Same code, just different ID destination. So I use jQuery to change the ID's of my two
As per the example "No toolbars" version code with the page URL http://pdfobject.com/examples/styled-no-toolbars.html
the toolbar should not be displayed for the embedded PDF file.
This working fine when we download the page for the very first time. But if we hit refresh/reload/F5 for the webpage, toolbar is displayed for the embedded PDF file.
it's possible to embed multiple pdfs like the way below,, i know it's not possible but if you know a way to make work pls tell us how.
thanks in advance
/<script type="text/javascript">/
window.onload = function (){
var success = new PDFObject({ url: "/pdf/sample.pdf" }).embed("pdf1");
};
/</script>/
/<script type="text/javascript">/
window.onload = function (){
var success = new PDFObject({ url: "/pdf/sample.pdf" }).embed("pdf2");
};
/</script>/
I am trying to add a scroll event to the PDF object I've created with PDFObject. I want user to scroll at least once before submitting the form.
I've tried javascript onscroll and jQuery .scroll() but its no use.
$('#pdfRenderer')[0].scrollTop
alway return 0 in any position niether the event is working.
Is there a way to achieve this using PDFObject.
Thanks.
I think this may have something to do with linking to a specific page in a pdf. I only have this issue with IE. The error message pops up, I click "OK" and then the pdf displays fine.
(the code is formatted- not sure how to add unformatted code snippets on this site- sorry!)
<script type="text/javascript"> window.onload = function (){ var success = new PDFObject({ url:"pdf/overview.pdf#page=1"}).embed("pdf"); }; </script>It appears you don't have Adobe Reader or PDF support in this web browser. Click here to download the PDF
with FF and Opera it opens Pdf with search parameter and shows results in navigation bar, but just above search results there is a text like "2 documents with 123 instances", it was also in IE but I changed the object's data attribute with param and it works in IE properly
I like your project and it is still a need of this time. I can contribute into your project. I am exploring this.
Can you share with me a simple use with a little example ?
I'm having trouble getting my pdf to open with PDF-Xchange. It keeps giving a invalid file format error. It works fine if I use the adobe pdf reader.
I know that pdfobject wasn't tested with other pdf readers other then adobe, but has anyone had any luck getting pdfobject to work with PDF-Xchange or any other pdf readers other then adobe?
Is this library still maintained? The las commit was 3 years ago,
is there another alternative?
Add ability to use a byte stream as source for viewer instead of just a file on disk.
My code is following:
var pdf = new PDFObject({ url: "/pdf/pdf?id=3", id: "newPDF", width: "100%", pdfOpenParams: { navpanes: 1, statusbar: 0, view: "FitH", } }).embed("pdfContent"); $(pdf).load(function() { $('#loading').hide(); });
How could I assign a handler to let user know of failure? Right now if for some reason the PDF loading should fail, I only get notices in Console.
I'm using PDFObject to show a PDF on a Facebook page. Works fine in every browser (except Firefox, which didn't like the HTML5 doctype). IE9 shows the PDF but with an element size of about 100px in height. The others are using the full body height.
I can provide an URL and the code I'm using if useful.
I changed the hasReaderActiveX "if" condition to
if (window.ActiveXObject !== undefined) {
and it is working fine now. is it ok or will it break something else?
Thanks,
Ravi
Similar to "Issue #14 - .embed("pdf");" issue, I am facing problem when try to embed multiple PDFs, I want to use multiple DIVs, but I want to use "Class" instead of different "IDs", as all DIVs will be generated at runtime.
I have Image slider where in some cases I have to show PDF, so the 1st instance of PDF works fine but rest all I get the error message which I have added in the : div id="pdf"
I saw the JS, its fixed to use either ID or Node name. So in my case, neither I can use ID nor node name as there are many DIV in my page.
Can you please look into this ASAP and suggest how this can be fixed.
Just FYI, for slider I am using "Galleriffic plugin > http://www.twospy.com/galleriffic/", and I am putting the PDF div inside "div class="caption"" where you can show the description related to the image.
Hi is there any way to disable downloading pdf's via pdfobject or disable printing ? I need only show my pdf's nothing more...
Thankyou
Hi,
I am using pdfobject to preview pdf. So i use embedding method. My issues are
I'm both having false positives and false negatives.
I wrapped the offending lines in try..catch, but that only prevents the script error, still the detection is wrong (well, the try..catch cannot fix that of course).
Is it possible to add a manual print option so users have the ability to print the PDF without using the toolbar?
It's hard to detect when a PDF has finished loading in such a way that works on all browsers. It would be great of PDFObject could provide such an event.
Note that, I am not sure if this is at all possible to do with current browser implementations. The absense of relevant answers to this question on stackoverflow is not encouraging.
https://github.com/andreasgal/pdf.js/
Just a thought. But would cover more territory for browsers with faster JS engines and Canvas support.
What is the expected behavior of the code below, should the web server return a 404 response (or
any response other than 2xx)?
var myPDF = new PDFObject({ url: "http://some.server/sample.pdf" }).embed(); if(myPDF){ //do something }
Should myPdf be null? This isn't the case in my experience (Mac Snow Leopard, Google Chrome 14.0.835.186).
I've attempted (with no luck) to modify the API allow the programmer to bind an 'onerror' event to the object tag on the line :
targetNode.innerHTML = "<object data="" + url + "" type="application/pdf" width="" + width + "" height="" + height + "">";
Any ideas about how to trap a 404?
instantiating PCFObject using parameters is useless !!
var myPDF = new PDFObject({
url: "sample.pdf",
id: "myPDF",
width: "500px",
height: "300px",
pdfOpenParams: {
navpanes: 1,
statusbar: 0,
view: "FitH",
pagemode: "thumbs"
}
}).embed("mydiv");
the only parameters used are : url, width, height and TargetID - the rest is just disregarded completely in the code !
Also... PDFObject doesn't add a non-object message < object >PDF not installed !! < /object >
you should look at jQuery.FlashEmbed which does a lot of nice things that you are missing.
Right now it just do nothing. It would be nice to show a message to the user, and a link to download the file.
Sometimes, IE9 dont download the file.
The request stay by 2minutes in a "pending" status, and then it works... but, man, 2 MINUTES is too much time.
I've fixed it in my fork, using a iframe in the place of object for ie9.
what the possible problem that this may cause?
Hi,
I try to use this class but have some problems with URL:
If I write url= 'test.pdf' and this file it's in same directory of page of website it's ok.
And this work for all subdirectory.
But if I write url='C:...\test.pdf' i take always white page...
What's I wrong?
The filename needs to be different than the variable name. For example, instead of saying var PDFObject
, and pdfobject.js
, try var ObjectPDF
is there a way to render a clientside generated file using the liblaries named above?
on the documentation i can only find
var success = new PDFObject({ url: "sample.pdf" }).embed();
and yet the url attr is unnavailable since the pdf is not comming from the server
any clue how i can use this?...thanks in advance ๐บ
Hello! Thank you very much for you PDFObject, that seems exactly what I need. However I store the user files outside of /var/www folder for security reasons so those don't have valid URLs. Is there a way to show such files by PDFObject?
php codes:
//.....
while (!feof($fh)){
print fread($fh, $chunksize);
ob_flush();
flush();
}
fclose($fh);
die;
it works with IE9/Safari/Firefox 14, however it doesn't work with Chrome!
I discovered PDFObject a few days ago.
The advanced JS Example (http://pdfobject.com/examples/conditional-js-advanced.html) suits my needs, but I'm wondering how I could dis-embeda pdf object from my page, as I'm going to have multiple pdf on my page, and I'd like to have only one open at a time, as if I could "fold/unfold" each file.
If "folding/unfolding" a pdf would be a great solution, I'm concerned about the Adobe Processus running in background when folded.
Thanks for any help
Hello,
In my project, I am using Jquery UI and PDFObject to popup a pdf file in a modal dialog box. It works fine when the main url has no elements in the query string. However, it errors out with the following message if there is anything included in the query string.
Error dialog with OK button:-
"Adobe Reader could not open 'A9RAE82.tmp' because it is either not a supported file type or because the file has been damaged(for example, it was sent as an email attachment and was'nt correctly decoded)."
I am using pdfobject 1.2
Jquery 1.8.3
jquery UI 1.9.2
ASP.NET 4.0 and IIS 6.0
Main browser url where it fails:-
https://staging/VendorUploads/Default.aspx?Request=Approval&Vendor=112233
Works fine if the url is :-https://staging/VendorUploads/Default.aspx
relevant JavaScript code:-
.....
.....
if (mediaType === 'application/pdf')
{
var success = new PDFObject({ url: URLLink }).embed("DynamicApproveRejectPop");
}
else
{
$("#DynamicApproveRejectPop").html($("").attr("src", URLLink));
}
.......
......
$('#DynamicApproveRejectPop').dialog({
autoOpen: false,
modal: true,
height: 700,
width: 700,
close: function ()
{
raiseAsyncPostback();
},
buttons: [{
text: "Accept", click: function (e) {
e.preventDefault();
AcceptInsurance();
}
},
{
text: "Reject", click: function (e) {
e.preventDefault();
RejectInsurance();
}
}]
});
.....
.....
Thanks,
Ravi
Hi, I'm trying to use this in Firefox. I had a full PDF Acrobat installed, and just also installed the latest version of Acrobat reader.
I get this message on http://pdfobject.com/examples/simplest.html It appears you don't have Adobe Reader or PDF support in this web browser. Click here to download the PDF
I checked Tools -> Options -> Applications and made sure Use Adobe Reader is selected. Still can't get this to work. (it does work on my laptop, but not my desktop and a few other laptops)
I'm facing some issues with formatting the PDF's source URL
BTW: FF 3.6.24 on a WinXP shows an alert The operation is not allowed and displays the PDF afterwards, however not on the selected page. Chrome works fine on same machine.
In my testing I've found that using an object to embed the PDF doesn't work for Adobe reader in IE9 (or maybe it's just me: IE9, Adobe Reader 9.5 or X, Windows 7 x64).
Try the following for example:
<!doctype html>
<html>
<body style='height: "100%"; width: "100%"'>
<object type='application/pdf' width='500' height='500' data='http://www.irs.gov/pub/irs-pdf/fw4.pdf'></object>
</body>
</html>
However, using an iframe works fine for HTML 5 doctype. I'm not sure if you can reliably detect the doctype in javascript with IE, but one option would be to use an iframe rather than object if the browser supports ActiveX. Something like this in the embed method:
if (hasReaderActiveX())
targetNode.innerHTML = '<iframe src="' + url + '" width="' + width + '" height="' + height + '"></iframe>';
else
targetNode.innerHTML = '<object data="' +url +'" type="application/pdf" width="' +width +'" height="' +height +'"></object>';
If you change the embed function to this
var embed = function(targetID){
var iframe = false;
if(!pluginTypeFound){ iframe = true; }
var targetNode = null;
if(targetID){
//Allow users to pass an element OR an element's ID
targetNode = (targetID.nodeType && targetID.nodeType === 1) ? targetID : document.getElementById(targetID);
//Ensure target element is found in document before continuing
if(!targetNode){ return false; }
} else {
targetNode = document.body;
setCssForFullWindowPdf();
width = "100%";
height = "100%";
}
if (iframe) {
targetNode.innerHTML = '<iframe src="' +url + '" class="b-plist-preview_with_pdf"></iframe>';
return targetNode.getElementsByTagName("iframe");
} else {
targetNode.innerHTML = '<object data="' +url +'" type="application/pdf" width="' +width +'" height="' +height +'"></object>';
return targetNode.getElementsByTagName("object")[0];
}
};
[please not class in iframe - sorry]
then IE11 allows you to embed the PDF.
Thanks for this.
C
Hi, I am successfully using PDFObject with a URL that fetches my PDF, but I cannot get it to work when using the raw byte array returned in a JSON object. Is this a limitation from Adobe, or am I using PDFObject incorrectly?
Thanks.
As in the title. I get "It appears you don't have Adobe Reader or PDF support in this web browser." in every example.
Is this possible?
For my project i need to get the position of the selected text in a pdf file.
Using PDFObject, i don't see how to do it with a script.
Thanks!
I am wondering about the following issue. I have a correct encoded URL and I try to send it to the PDFObject like this:
var mypdf = new PDFObject({ url: "http://www.example.com?aParam%5B0%5D=1&aParam%5B1%5D=4&aParam%5Ba%5D=b&aParam%5Bc%5D=d" }).embed("pdf");
I used the php-function http_build_query() to handle all the necessary escaping (%5B => [ and %5D => ]), so this string should be equal to aParam[0]=1&aParam[1]=4&aParam[a]=b&aParam[c]=d
If i paste the urlencoded URL in my browser i am able to see the correct PDF.
If i use this URL in PDFObject it seems to be the case that the parameters could not be received from the server. I got it working by using on my query string before but i do not think this is the correct way.
Don't you think that PDFObject should be able to handle urlencoded URLs? Or is PDFObject encoding the URL by itself so that it was a double encoding issue? Please tell me you opinion.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.