在html頁面中，如何將pdf文檔的第一頁顯示爲圖標？

我已經使用下面的代碼來顯示HTML頁面中的PDF文件列表。我想將每個PDF文件的第一頁顯示爲它們的圖像圖標。截至目前，我沒有使用任何服務器。請在此引導我。代碼在這裏：在html頁面中，如何將pdf文檔的第一頁顯示爲圖標？

<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. ：我在這裏爲每個div添加了imagewrap類，因爲我無法將刪除圖標添加到每個pdf圖標圖像。

任何幫助將不勝感激。在此先感謝

來源

2013-07-23 Vineetha

重複：http://stackoverflow.com/questions/17781793/how-to-display-the-first-page-of-a-pdf-file-as-icon-when-the-pdfs-are-added -in -a –

如果您不想使用圖像進行預覽，則必須呈現每個.pdf文件。最簡單的方法將是一個IFrame，但你可以找到更多的解決方案here。

但請記住，如果您有幾個.pdf的列表，您放入IFrame中的每個.pdf都將被完全加載並且可能會使您的頁面變得很慢。

來源

2013-07-23 10:55:08

快速搜索「pdf縮略圖服務」，發現了幾項服務。他們大多數是免費的（每月免費點擊量高）。在第二返回的第一頁很好：

我試着用下面的URL幾個（PDF參考）：

bluga.net：分鐘後仍搗弄
shrinktheweb.com
websnapr.com：在第二
thumbalizr.com顯示斷開的圖像：返回13秒

後 '圖像失敗'

基於這個快速實驗，我會仔細看看shrinktheweb.com（不附屬）。

來源

2013-07-23 11:45:09

我無法訪問shrinktheweb.com，因爲該類別在我的系統中被阻止。我甚至嘗試過websnapr.com，但沒有顯示圖像。 – Vineetha

在html頁面中，如何將pdf文檔的第一頁顯示爲圖標？

回答

相關問題