Javascript 显示嵌入的pdf文件_Javascript_Html_Css_Pdf_Internet Explorer 8

Javascript 显示嵌入的pdf文件

javascript html css pdf internet-explorer-8

Javascript 显示嵌入的pdf文件,javascript,html,css,pdf,internet-explorer-8,Javascript,Html,Css,Pdf,Internet Explorer 8,我一直在努力寻找一种可行的方法，将.pdf文件嵌入到广泛可访问的网页中，包括IE8用户。我认为pdf.js不起作用，因为我想嵌入文件，而不是将它们作为新页面加载。PDFObject似乎是最佳选择。但是当我使用他们的代码时，无论我使用什么浏览器，我都只能显示页面长度的四分之一，如附图所示。第一行文字下面的所有内容都是我网站背景的白色。我尝试了遵循PDFObject指令和使用它们的代码生成器。不管怎样都不走运。代码如下： <!-- insert in the document body --&

我一直在努力寻找一种可行的方法，将.pdf文件嵌入到广泛可访问的网页中，包括IE8用户。我认为pdf.js不起作用，因为我想嵌入文件，而不是将它们作为新页面加载。PDFObject似乎是最佳选择。但是当我使用他们的代码时，无论我使用什么浏览器，我都只能显示页面长度的四分之一，如附图所示。第一行文字下面的所有内容都是我网站背景的白色。我尝试了遵循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>

这一切都直接来自PDFObject编码器。网站上有一个教程，据我所知，我已经非常仔细地遵循了它，但没有运气。所以我被难住了，如果有任何建议，我将不胜感激。坦白地说，我希望我根本不必适应IE8，我希望我可以让pdf.js为我想要的工作，但这两种方式都不是可行的选择。再次感谢您的建议

注意：请注意更正的代码，它给出了PDFObject生成的全部内容

注2：这是我希望将查看器插入的页面的全部内容。我跳过了javascript版本，它将让我在标题中插入代码，并用pdf和查看器填充整个页面。在我的页面中设置.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>

我们在哪里可以看到这种情况发生？html、css和javascript代码在哪里？PDFObject有一个代码生成器，声称可以创建可用的文本，这就是我复制和发布的内容。该页面没有提及css或javascript。他们确实有一个javascript生成器选项，但他们建议不要使用它。他们似乎在说，如果你把代码片段插入到一个页面中，在主体中，它就会被嵌入。部分是这样的。将此添加到您的页面，在标记内：{padding:0；margin:0；width:100%；height:100%；}。我想我可以在这里粘贴代码，但看起来我不能。请看我原来帖子的改动。什么？o、 o你能换个说法吗？

<!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>