显示嵌入的pdf文件

时间:2014-10-26 21:05:40

标签: javascript html css pdf internet-explorer-8

我一直在努力找到一种可行的方法来在广泛可访问的网页中嵌入.pdf文件,包括IE8用户。我不认为pdf.js会起作用,因为我想嵌入文件,而不是将它们作为新页面加载.PDFObject似乎是最好的选择。但是当我使用他们的代码时,无论我使用什么浏览器,我只能显示大约四分之一的页面长度,如附图中所示。 enter image description here第一行文字下方的所有内容都只是我网站背景的白色。我已经尝试了遵循PDFObject指令并使用它们的代码生成器。无论如何都没有运气。这是代码:

<!-- insert in the document body -->

<object data='http://www.example.com/TestDoc.pdf#' 
        type='application/pdf' 
        width='100%' 
        height='100%'>

<p>It appears your Web browser is not configured to display PDF files. 
No worries, just <a href='http://www.chrisrichard.org/TestDoc.pdf'>click here to download the PDF file.</a></p>

</object>

这里是javascript版本:

<!-- insert in the document head -->

<script type='text/javascript'>

  function embedPDF(){

    var myPDF = new PDFObject({ 

      url: 'http://www.example.com/TestDoc.pdf'

    }).embed();  

  }

  window.onload = embedPDF; //Feel free to replace window.onload if needed.

</script>

这一切都直接来自PDFObject编码器。网站上有一个教程,据我所知,我一丝不苟地跟着它,但没有运气。 所以我很难过,并且会感激任何建议。坦率地说,我希望我根本不需要容纳IE8,我希望我可以让pdf.js适合我想要它做的事情,但似乎都不是一个可行的选择。再次,提前感谢任何想法。

注意:请注意更正的代码,它提供了PDFObject生成的全部内容。

注意2:这是我想要插入查看器的整个页面。我已经跳过了javascript版本,这将让我在标题中插入代码,并使用pdf和viewer填充整个页面。在我的页面中设置.pdf非常重要。 我几乎肯定会摆脱swfobject引用,因为它不适用于移动设备等。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>example.com - </title>
<link href="oneColLiqCtrHdr.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#MenuHolder {
    position:absolute;
    left:692px;
    top:50px;
    width:228px;
    height:23px;
    z-index:1;
}
-->
</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<body class="oneColLiqCtrHdr">
<div id="container">
        <div id="header">
    <h1><img src="images/BodyLogo.jpg" width="665" height="57" alt="Logo" /></h1>
    <link type="text/css" rel="stylesheet" href="/floatbox/floatbox.css" />
<script type="text/javascript" src="/floatbox/floatbox.js"></script>
<script type="text/javascript" src="/floatbox/options.js"></script>
 <link rel="stylesheet" href="/Menu2Assets/mbcsmb4pc8.css" type="text/css" />


<div id="mb4pc8ebul_wrapper" style="max-width: 345px;">
  <ul id="mb4pc8ebul_table" class="mb4pc8ebul_menulist css_menu">
  <li><div class="arrow buttonbg"><a>Examples</a></div>
    <ul>
    <li><a href="Example1.html" target="_self" title="">Example1</a></li>
    <li><a href="Example2.html" target="_self" title="">Example2</a></li>
    <li><a href="Example3.html" target="_self" title="">Example3</a></li>
    <li><a href="Example4.html" target="_self" title="">Example4</a></li>
    </ul></li>
  <li><div class="buttonbg" style="width: 86px;"><a href="resume.html" target="_parent" class="button_2">Resume</a></div></li>
  <li><div class="arrow buttonbg" style="width: 96px;"><a>Contact</a></div>
    <ul>
    <li><a href="Mail/contactform.php" class="floatbox" data-fb-options="width:50% height:80% scrolling:yes" title="">Email</a></li>
    <li><a href="files/index.php" class="floatbox" data-fb-options="width:50% height:80% scrolling:yes" title="">Send</a></li>
    </ul></li>
  <li><div class="buttonbg" style="width: 69px;"><a href="index.html" target="_self" class="button_4">Home</a></div></li>
  </ul>
</div>
<script type="text/javascript" src="/Menu2Assets/mbjsmb4pc8.js"></script>
  <!-- end #header --></div>
</head>
  <div id="mainContent">
    <p align="center">&nbsp;</p>
    <p align="center">&nbsp;</p>
    <p align="center">&nbsp;</p>
<!-- insert in the document body -->

<object data='http://www.example.com/TestDoc.pdf#' 
        type='application/pdf' 
        width='100%' 
        height='100%'>

<p>It appears your Web browser is not configured to display PDF files. 
No worries, just <a href='http://www.example.com/TestDoc.pdf'>click here to download the PDF file.</a></p>

</object>
    <p align="center">&nbsp;</p>
    <p align="center">&nbsp;</p>
  </div>
  <div id="footer">
<p align="center"><img src="images/Copyright.jpg" width="190" height="15" alt="Copyright" /></p>
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

0 个答案:

没有答案