web中打开PDF文件

时间：2024-04-16 10:59:36

首先引用js 文件

1.  <script type="text/javascript" src="JS/pdfobject.min.js"></script>
  <script type="text/javascript" src="JS/pdfobject.js"></script>

2. 引用样式 ：(该样式是不可缺少的因为在这里设置页面中PDF的高度)

 <style type="text/css">
        .held {
            display: none;
        }

        .pdfobject-container {
            height: 900px;
        }

        .pdfobject {
            border: 1px solid #666;
        }
    </style>

3. js 代码如下：

//备注：这里用到  window.onload 详细大家对这个不陌生吧。如果实在不清楚就简单的描述下（window.onload是在dom文档树加载完和所有文件加载完之后执行一个函数。）也就是说当你生成完PDF文件后并且 加载所有文件后才执行打开PDF功能。

 <script type="text/javascript">
        window.onload = function () {
            var Pdf = $("#lblUrl").text();  备注：这个是生成后PDF的地址 （我用的是隐藏一个控件把地址给这个控件在通过JQuery 获取并添加到 PDFObject.embed(Pdf, "#example1"); 下面）
            PDFObject.embed(Pdf, "#example1");
        };

    </script>

 

4. 在这个div里显示打开的PDF文件 这个很简单一个div 就搞定了。（备注：这个div的ID 必须要和  PDFObject.embed(Pdf, "#example1"); 这个一样的否则就会有问题。）

<body ms_positioning="GridLayout">
    <form id="Form1" method="post" runat="server">

        <div id="example1"></div>
    </form>
</body>

 

5. 切记这里必须安装：Acrobat Reader  否则无法在网页中打开PDF文件

6.问题解答：

如果遇到以下问题:

 提示错误： PDFObject本页面上存在错误。Acrobat可能无法正确显示页面,请联系PDF文档的创建者

这个错误是没有引用  pdfobject.min.js 这个js文件导致的。 为了解决这个我搞了好久。

以下是官方地址：https://pdfobject.com/   

希望以上对你有帮助。如果没有就当小说看吧。哈哈

 

相关文章