在html页面中，如何将pdf文档的第一页显示为图标？答案

【问题标题】：In an html page,how to display the first page of a pdf document as the icon?在html页面中，如何将pdf文档的第一页显示为图标？
【发布时间】：2013-07-22 09:25:06
【问题描述】：

我使用以下代码在 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>

附：：我在这里为每个 div 添加了 imagewrap 类，因为否则我无法将删除图标添加到每个 pdf 图标图像中。

任何帮助将不胜感激。提前致谢

【问题讨论】：

重复：stackoverflow.com/questions/17781793/…

标签： html image pdf

【解决方案1】：

快速搜索“pdf 缩略图服务”会发现一些服务。其中大部分是免费增值的（每月最多免费点击数次）。

我尝试了以下 URL（PDF 参考）： http://partners.adobe.com/public/developer/en/pdf/PDFReference.pdf

bluga.net：几分钟后仍在嘎吱作响
shrinktheweb.com：第一页很快就返回了
websnapr.com：在一秒钟内显示损坏的图像
thumbalizr.com：13 秒后返回“图片失败”

在这个快速实验的基础上，我会仔细查看shrinktheweb.com（非附属网站）。

【讨论】：

我无法访问shrinktheweb.com，因为该类别在我的系统中被阻止。我什至尝试了 websnapr.com，但没有显示图像。

【解决方案2】：

如果您不想使用图像进行预览，则必须渲染每个 .pdf 文件。最简单的方法是 IFrame，但您可以找到更多解决方案 here。

但请记住，您放入 IFrame 的每个 .pdf 都将被完全加载，如果您有一个包含多个 .pdf 的列表，它可能会使您的页面变得非常缓慢。

【讨论】：