如何使用JavaScript在静态页面插入PDF文件(附带效果图)?

如何在静态页面上插入PDF文件并读取出来,首先我们需要先下载一个PDF的插件pdfobject.js,放在你的项目的文件夹下,如下图所示:

这里写图片描述

pdfobject.js的下载地址:http://download.csdn.net/detail/macon_2014/7331743

下好插件之后,需要在我们的页面中引入进去

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

接下来是在我们页面上中写显示pdf的js,具体代码如下:

$(function () {  
            var purl='pdf/1.pdf';   //定义一个pdf的url属性,'里面是你存放pdf文件的地址

            // 以下的代码都是处理IE浏览器的情况,直接复制即可   
            if (window.ActiveXObject || "ActiveXObject" in window) {  
                //判断是否为IE浏览器,"ActiveXObject" in window判断是否为IE11  
                //判断是否安装了adobe Reader  
                for (x = 2; x < 10; x++) {  
                    try {  
                        oAcro = eval("new ActiveXObject('PDF.PdfCtrl." + x + "');");  
                        if (oAcro) {  
                            flag = true;  
                        }  
                    } catch (e) {  
                        flag = false;  
                    }  
                }  
                try {  
                    oAcro4 = new ActiveXObject('PDF.PdfCtrl.1');  
                    if (oAcro4) {  
                        flag = true;  

                    }  
                } catch (e) {  
                    flag = false;  
                }  
                try {  
                    oAcro7 = new ActiveXObject('AcroPDF.PDF.1');  
                    if (oAcro7) {  
                        flag = true;  
                    }  
                } catch (e) {  
                    flag = false;  
                }  
                if (flag) {  
                    var success = new PDFObject({ url: purl, pdfOpenParams: { scrollbars: '0', toolbar: '0', statusbar: '0'} }).embed("pdf1");  
                    if (!success) {  
                    var opts = {  
                        width:$(document).width(),  
                        height: $(document).height(),  
                        autoplay: true  
                    };  
                }  

                }  
                else {  
                    alert("还没有安装PDF阅读器软件,请选择安装!");  
                    location = "http://ardownload.adobe.com/pub/adobe/reader/win/9.x/9.3/chs/AdbeRdr930_zh_CN.exe";  
                }  
            }  
            else {  
                var success = new PDFObject({ url: purl, pdfOpenParams: { scrollbars: '0', toolbar: '0', statusbar: '0'} }).embed("pdf1");  
                if (!success) {  
                    var opts = {  
                        width:$(document).width(),  
                        height: $(document).height(),  
                        autoplay: true  
                    };  
                }  
            }  
        });  

html代码如下:


<form id="form1" runat="server">
<div id="pdf1" class="yuanmenu_01"><h1>还没有安装PDF阅读器软件,请选择安装! </h1>
<a href="http://ardownload.adobe.com/pub/adobe/reader/win/9.x/9.3/chs/AdbeRdr930_zh_CN.exe"><h1>点击下载</h1></a>
</div>
</form>

然后就可以阅读插入的pdf文件了,效果图如下。

这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值