如何使用JavaScript在静态页面插入PDF文件（附带效果图）？_ts引入静态pdf并展示

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

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

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

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

接下来是在我们页面上中写显示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  
                    };  
                }  
            }  
        });  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

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文件了，效果图如下。