在网页中阅读PDF文件

方案一 浏览器插件

方案说明

本方案基于浏览器插件实现，浏览器调用PDF阅读相关的插件，实现PDF文件的在线阅读。
Chrome浏览器内置了PDF阅读插件，IE浏览器需要单独安装。

• 优点
  • 可以兼容几乎所有浏览器
  • 代码简单，不需要引入第三方JavaScript库的支持
• 缺点
  • 本地必须安装PDF的阅读软件或浏览器的PDF阅读插件。

实现代码

<script>
  var pdfurl= "../web/alipapaJavaRegular.pdf"; // 定义pdf文件的url地址
  var pdfwidth=900;//定义pdf单页宽度
  var pdfheight=document.documentElement.clientHeight - 117;//定义pdf单页高度
  if(pdfurl.indexOf(".pdf")>=0){//判断是否为PDF，是就显示，不是就不显示  
    document.write("<object classid='clsid:CA8A9780-280D-11CF-A24D-444553540000' width='"+pdfwidth+"' height='"+pdfheight+"' border='0' top='-10' name='pdf'> ");
    document.write("<param name='toolbar' value='false'>");
    document.write("<param name='_Version' value='65539'>");
    document.write("<param name='_ExtentX' value='20108'>");
    document.write("<param name='_ExtentY' value='10866'>");
    document.write("<param name='_StockProps' value='0'>");
    document.write("<param name='SRC' value='"+pdfurl+"'>");
    document.write("<embed name='plugin' src='"+pdfurl+"' type='application/pdf' width='"+pdfwidth+"' height='"+pdfheight+"'>");
    document.write("</object>");
  };
</script>

方案二 pdf.js

方案说明

本方案采用开源的pdf.js第三方库来实现PDF的在线预览。使用时，需要引入pdf.js的相关文件。
pdf.js，官网：http://mozilla.github.io/pdf.js/

• 优点
  • pdf.js不依赖本地插件，采用JavaScript来渲染并显示PDF文件。
  • 代码简单。只需要在使用页添加iframe标签，将其引入即可。
  • 可定制性高。由于采用纯前端技术实现，显示和交互界面的可定制型高。
• 缺点
  • 兼容性，**ie9+**。不兼容ie8。
  • 需要引入库中相关的文件

实现代码

• 引入pdf.js的相关文件
  • /web pdf阅读器功能页面
    • viewer.html pdf阅读器功能页面
    • viewer.js pdf阅读器功能页面的JavaScript文件，可以微调参数，修改功能
    • viewer.css pdf阅读器功能页面的样式
  • /build pdf阅读器功能页面
    • pdf.js 接口层
    • pdf.worker.js 核心层
• 在页面中使用iframe引入编辑器的页面

<iframe src="./viewer.html?file=xxx.pdf" width="900px" height="600px"></iframe>

• src, pdf阅读器的功能页面，通过url传参确定显示的pdf文件
  • file PDF文件的地址，可以使用相对路径
• width, pdf阅读器的宽
• height, pdf阅读器的高