在网页中嵌套pdf的几种方法

公司让在网页上显示pdf，网上找了很多方法，也踩了很多坑，终于搞定了

有几种方法加载pdf

1. 使用a标签打开新窗口，依赖浏览器上的pdf插件，直接打开pdf，chrome和firefox展示样式就不相同（对pdf样式要求不高的可以直接使用这个）下图就是展示这种样式，可以选填参数

<a href="https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf"></a>

     2. 直接在页面嵌入pdf，依赖浏览器自身带的pdf插件渲染，会展示这个样式，或者使用PDFObject插件。（这种方式不满足设计图上的白色边框）

•         2.1 依赖浏览器的pdf插件

<iframe id="myframe"
    src="https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf#page=1"
      width="100%" height="1000" frameborder="0"></iframe>

•  使用PDFObject 插件，首先下载https://github.com/pipwerks/PDFObject/blob/master/pdfobject.js

更多demo及用法请查看https://pdfobject.com/

<div id="example1"></div>
<style>
.pdfobject-container { width: 936px; height: 902px; }
</style>
<script>
var options = {
      pdfOpenParams: {
        page: 1, // 第几页，没有则默认缓存上次打开的页数
        toolbar: 0,  // 关闭第几栏
        navpanes: 0, // 关闭导航
        statusbar: 0, // 关闭状态栏
        view: "FitH", // 视图顶对齐
        scrollbars: "0" // 滚动条关闭
      }
    };
    
    PDFObject.embed("test.pdf", "#example1", options);
</script>

     3. 下载火狐浏览器插件pdfjs ， 地址https://github.com/mozilla/pdf.js/releases/tag/v2.5.207

在本地解压缩，进入项目，在本地起一个简单的服务

 python -m SimpleHTTPServer 8000 # 起一个端口号为8000的服务

   在本地浏览器输入 http://localhost:8000/，打开viewer.html 成功看到pdf文件渲染成功，此pdf为默认的路径，如果想改默认pdf，可以修改如下： 全局搜索compressed.tracemonkey-pldi-09.pdf文件，把文件替换掉，在viewers.js里替换掉compressed.tracemonkey-pldi-09.pdf为新的文件名称

如果想改背景找到view.css ,body里的background-color：rgba(64, 64, 64, 1) 并修改

<iframe id="myframe"
      src="http://localhost:8000/viewer.html?file=https://http://localhost:8000/test.pdf"
      width="100%" height="473" frameborder="0"></iframe>

 file=后的路径为你的pdf的路径

需要注意以下几点：

• pdfjs的地址，必须和file里的地址在同一域名下
• iframe如果是http环境，那么src的地址可以是http、https，但是如果iframe是https环境，那么src的地址必须是https
• src里的pdf地址和file里的地址必须是相同协议，即统一http或者https

* 在做移动端的时候遇到了一个问题，滚动条的宽度太大，导致pdf内容小，所以把viewer.js里的SCROLLBAR_PADDING调整为0 就可以里

官网介绍：https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf