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

来源:互联网 发布:高级研修班 知乎 编辑:程序博客网 时间:2024/06/07 06:11

如何在静态页面上插入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文件了,效果图如下。

这里写图片描述

阅读全文
0 0
原创粉丝点击