question about PDFObject javascript with pdf files that are not available
1,265 views
Skip to first unread message
Jeff Brelsford
Mar 17, 2009, 2:55:52 PM3/17/09
to eLearning Technology and Development
I had a question concerning how best to use the PDFObject javascript
when the specified URL may not return a valid PDF. We plan on using
PDFObject where we specify a URL that calls back into our web
application, which in turn will call a web service to retrieve the
PDF. While we can be fairly confident the PDF will be returned, it may
be possible for the web service to fail. If this is the case, we would
like to hide the surrounding div tag embedding the PDF viewer so that
failure is not negatively noticable to the user.
It seems however that the way the PDF object is built, and with the
way the embed method is implemented, the url to the PDF is resolved
fairly late in the process. I was in hopes that PDFObject supported a
getSize() attribute that would return the size of the PDF, but there
doesn't seem to be anything like that available.
Here is a snippet of what we have:
<html><head><title>Embedding a PDF File in HTML using PDFObject
Javascript</title>
<link rel="stylesheet" href="styles/style.css" type="text/css">
<script type="text/javascript" src="js/pdfobject.js"></script>
<script type="text/javascript">
function loadPDF (){
document.getElementById("pdfArea").style.display =
'none';
var myPDF = new PDFObject({
url: "http://linkToOurWebSite/getPDF",
pdfOpenParams: {
navpanes: 0,
toolbar: 0,
statusbar: 0,
scrollbar: 1,
pagemode: "none",
view: "fitH"
}
});
var success = myPDF.embed("pdfArea");
if (success) {
alert("success = " + success);
document.getElementById("pdfArea").style.display =
'block';
}
};
</script>
<style type="text/css">
<!--
#pdfArea {
display: block;
width: 700px;
height: 300px;
margin: 2em auto;
/*border: 10px solid #6699FF;*/
}
#pdfArea p {
padding: 1em;
}
#pdfArea object {
display: block;
border: solid 1px #666;
}
-->
</style>
</head>
<body>
<div id="content">
<blockquote>
<div id="pdfArea">It appears you do not have a PDF Viewer loaded.</
div>
</blockquote>
</div>
<script type="text/javascript">
loadPDF();
</script>
</body>
</html>
I added a variable called success, which is simply the HTMLObject that
is created, so it's always true.
But in all instances, myPDF has a value and myPDF.embed() will return
a value. So I'm not sure how I can possibly hide the pdfArea div
should the call to http://linkToOurWebSite/getPDF not return a valid
PDF.
Does anyone have any ideas? Thanks in advance!
when the specified URL may not return a valid PDF. We plan on using
PDFObject where we specify a URL that calls back into our web
application, which in turn will call a web service to retrieve the
PDF. While we can be fairly confident the PDF will be returned, it may
be possible for the web service to fail. If this is the case, we would
like to hide the surrounding div tag embedding the PDF viewer so that
failure is not negatively noticable to the user.
It seems however that the way the PDF object is built, and with the
way the embed method is implemented, the url to the PDF is resolved
fairly late in the process. I was in hopes that PDFObject supported a
getSize() attribute that would return the size of the PDF, but there
doesn't seem to be anything like that available.
Here is a snippet of what we have:
<html><head><title>Embedding a PDF File in HTML using PDFObject
Javascript</title>
<link rel="stylesheet" href="styles/style.css" type="text/css">
<script type="text/javascript" src="js/pdfobject.js"></script>
<script type="text/javascript">
function loadPDF (){
document.getElementById("pdfArea").style.display =
'none';
var myPDF = new PDFObject({
url: "http://linkToOurWebSite/getPDF",
pdfOpenParams: {
navpanes: 0,
toolbar: 0,
statusbar: 0,
scrollbar: 1,
pagemode: "none",
view: "fitH"
}
});
var success = myPDF.embed("pdfArea");
if (success) {
alert("success = " + success);
document.getElementById("pdfArea").style.display =
'block';
}
};
</script>
<style type="text/css">
<!--
#pdfArea {
display: block;
width: 700px;
height: 300px;
margin: 2em auto;
/*border: 10px solid #6699FF;*/
}
#pdfArea p {
padding: 1em;
}
#pdfArea object {
display: block;
border: solid 1px #666;
}
-->
</style>
</head>
<body>
<div id="content">
<blockquote>
<div id="pdfArea">It appears you do not have a PDF Viewer loaded.</
div>
</blockquote>
</div>
<script type="text/javascript">
loadPDF();
</script>
</body>
</html>
I added a variable called success, which is simply the HTMLObject that
is created, so it's always true.
But in all instances, myPDF has a value and myPDF.embed() will return
a value. So I'm not sure how I can possibly hide the pdfArea div
should the call to http://linkToOurWebSite/getPDF not return a valid
PDF.
Does anyone have any ideas? Thanks in advance!
Philip Hutchison
Mar 18, 2009, 1:55:45 AM3/18/09
to elearning-technolo...@googlegroups.com
Hi Jeff
The success value returned by myPDF.embed merely indicates that PDFObject executed as expected (which means PDFs should be supported by the browser in question). It does not indicate whether the file URL is valid or not.
This is also the case with other JavaScript libraries such as SWFObject; JavaScript, being a client-side script, has no built-in mechanism for determining if a specified file exists or not. The most popular workaround/hack for this is to use xmlhttprequest (of ajax fame) to load the file.
When you load a file using xmlhttprequest, you can use the readystate event to determine whether the file loaded successfully or not.
There are tons of examples online (try googling), but the pseudo code looks like this:
(status code 404 means file not found)
To summarize: the functionality you're looking for isn't in PDFObject, but you can roll your own using xmlhttpreqest in conjunction with PDFObject.
Hope that helps
- philip
The success value returned by myPDF.embed merely indicates that PDFObject executed as expected (which means PDFs should be supported by the browser in question). It does not indicate whether the file URL is valid or not.
This is also the case with other JavaScript libraries such as SWFObject; JavaScript, being a client-side script, has no built-in mechanism for determining if a specified file exists or not. The most popular workaround/hack for this is to use xmlhttprequest (of ajax fame) to load the file.
When you load a file using xmlhttprequest, you can use the readystate event to determine whether the file loaded successfully or not.
There are tons of examples online (try googling), but the pseudo code looks like this:
- load PDF using xmlhttprequest
- monitor onreadystatechange
- if readystate reports success, file is found.
- abort xmlhttprequest
- embed PDF into HTML using PDFObject.
- else perform fallback action
(status code 404 means file not found)
To summarize: the functionality you're looking for isn't in PDFObject, but you can roll your own using xmlhttpreqest in conjunction with PDFObject.
Hope that helps
- philip
Reply all
Reply to author
Forward
0 new messages