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

Question

我使用以下代碼在 HTML 頁面中顯示 PDF 文件列表。 我想將每個 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>

PS：我在這里為每個 div 添加了 imagewrap 類，因為否則我無法將刪除圖標添加到每個 pdf 圖標圖像。

任何幫助將不勝感激。 提前致謝

Answer 1

如果您不想使用圖像進行預覽，則必須渲染每個 .pdf 文件。 最簡單的方法是使用 IFrame，但您可以在此處找到更多解決方案。

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

Answer 2

快速搜索“pdf 縮略圖服務”會發現一些服務。 他們中的大多數都是免費增值（每月最多免費點擊數次）。

我嘗試了以下 URL（PDF 參考）： http : //partners.adobe.com/public/developer/en/pdf/PDFReference.pdf

bluga.net：幾分鍾后仍然嘎吱作響
shrinktheweb.com：一秒返回第一頁
websnapr.com：一秒鍾內顯示損壞的圖像
thumbalizr.com：13 秒后返回“圖片失敗”

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

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

問題描述

2 個解決方案

解決方案1
0 2013-07-23 10:55:08

解決方案2
0 2013-07-23 11:45:09

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

問題描述

2 個解決方案

解決方案1 0 2013-07-23 10:55:08

解決方案2 0 2013-07-23 11:45:09

解決方案1
0 2013-07-23 10:55:08

解決方案2
0 2013-07-23 11:45:09