1

I have used the following code to display a list of PDF files in an HTML page. I want to display the first page of every PDF file as the image icon for them. I am not using any servers as of now. Please guide me on this. Code goes here: 

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link type="text/css" href="cssjquery/ui-lightness/jquery-ui-1.8.24.custom.css" rel="stylesheet" />
<title>Unit 3, ADS</title>
<style type="text/css">
.imagewrap {
    display: inline-block;
    position: relative;
}

.btn {
    position: absolute;
    top: 0;
    right: 0;
}

</style>


<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="jsjquery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jsjquery/jquery-ui-1.8.24.custom.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){ 
$('a.btn').on('click',function(e){
    e.preventDefault();
    pdfID = $(this).closest('.imagewrap')[0].id;
    $('#dialog').dialog('open');
  alert('Deleting '+pdfID+'');
   $(this).closest('.imagewrap')
        .fadeTo(300,0,function(){
            $(this)
                .animate({width:0},200,function(){
                    $(this)
                        .remove();
                });
        });   
});
}); 


</script>
</head>
<body>


    <h1>PDF Files</h1>
<br><br>
    <div class="imagewrap" id="pdf1">
        <a href="something1.pdf"><img src="pdf icon.jpg" width="100" height="100" border="0"></a>&nbsp;&nbsp;<a class="btn" href="#"><i class=" icon-remove-sign" ></i></a>
    </div>
    <div class="imagewrap" id="pdf2">
        <a href="something2.pdf"><img src="pdf icon.jpg" width="100" height="100" border="0"></a>&nbsp;&nbsp;<a class="btn" href="#"><i class=" icon-remove-sign" ></i></a>
    </div>
<div class="imagewrap" id="pdf3">
        <a href="something3.pdf"><img src="pdf icon.jpg" width="100" height="100" border="0"></a>&nbsp;&nbsp;<a class="btn" href="#"><i class=" icon-remove-sign" ></i></a>
    </div>

</body>

P.S. : I have added imagewrap class to each div here because I was not able to add the remove icon to every pdf icon image otherwise.

Any help would be greatly appreciated. Thanks in advance

Vineetha
  • 31
  • 2
  • 2
  • 4
  • duplicate: http://stackoverflow.com/questions/17781793/how-to-display-the-first-page-of-a-pdf-file-as-icon-when-the-pdfs-are-added-in-a – Frank Rem Jul 23 '13 at 11:59

2 Answers2

1

A quick search for "pdf thumbnail service" revealed a couple of services. Most of them are freemium (free up to a number of hits per month).

I tried a few with the following URL (PDF reference): http://partners.adobe.com/public/developer/en/pdf/PDFReference.pdf

  • bluga.net: Was still crunching after minutes
  • shrinktheweb.com: Returned the first page nicely in a second
  • websnapr.com: Displayed broken image in a second
  • thumbalizr.com: Returned 'picture failed' after 13 seconds

Beased on this quick experiment I would take a closer look at shrinktheweb.com (not affiliated).

Frank Rem
  • 3,632
  • 2
  • 25
  • 37
  • I am not able to access shrinktheweb.com since that category is blocked in my system. I even tried websnapr.com but no image was displayed. – Vineetha Jul 24 '13 at 09:06
0

If you dont want to use images for the preview, you have to render every .pdf file. Simplest way would be an IFrame, but you can find more solutions here.

But keep in mind that every .pdf you put in an IFrame will be loaded completely und if you have a list of several .pdf's it could make your page quite slow.

Community
  • 1
  • 1
Mx.
  • 3,588
  • 2
  • 25
  • 33