Pbootcms如何PDF在线预览功能（包含手机端）

转摘：PB2345

今天用户有需求，电脑端嵌入PDF在线浏览功能，站长就说下这个功能所遇到的坑，全当给大伙记个笔记。

当有这个需求的时候想到的就是最基础的<iframe>标签嵌套，然后设置<iframe>的宽度和高度值，开始没想那么多，忽略了手机端，所以造成了电脑端正常，手机端无法显示空白的问题，通过调整CSS，只实现了PDF第一页的显示，所以最终无果。

第二次尝试是通过CSS判断电脑端使用<Iframe>嵌入PDF，手机端判断显示一个<a>标签跳转PDF附件页，由于本人用的是苹果手机，所以实现了这个功能，但是忽略了用户是安卓机的问题，所以造成了苹果机正常，安卓机会跳转下载附件，无法直接打开，最终无果。

第三次尝试是修改百度编辑器JS增加PDF附件功能，最终修改后双端都无果。

第四次尝试也是最终尝试，通过PDF.JS插件配合HTML，再配合双端代码判断页面实现。

首先我把电脑端继续用<iframe>嵌套PDF实现效果，然后通过CSS判断电脑端隐藏<iframe>嵌套，手机端显示<a>标签，配合PDF.JS组件

*注：{content:ext_pdf}是我独立增加的附件字段

css判断代码

<style>
    
    .code-contAIner {
  display: none; /* 默认在所有设备上隐藏代码容器 */
}

/* 在宽度小于768px的设备上显示代码容器（通常是手机和平板） */
@media screen and (max-width: 767px) {
  .code-container {
    display: block; /* 在小屏幕设备上显示代码容器 */
  }
  .code-container {margin:0 auto;width:80%;text-align:center;}  
  .code-container a{width:100%;text-align:center;line-height:40px;background:#656565;color:#fff;float:left}  
  
}
/* 你可以根据需要调整上面的max-width值，以适应不同的平板尺寸 */
    .pc_xianshi {
  display: block; /* 默认在所有设备上隐藏代码容器 */
}

/* 在宽度小于768px的设备上显示代码容器（通常是手机和平板） */
@media screen and (max-width: 767px) {
  .pc_xianshi {
    display: none; /* 在小屏幕设备上显示代码容器 */
  }
}

/* 你可以根据需要调整上面的max-width值，以适应不同的平板尺寸 */
</style>

html示例代码

{pboot:if('{content:ext_pdf}'!='')}

  <p class="pc_xianshi">
    <iframe src="{content:ext_pdf}" width="100%" height="1000px" ></iframe>
</p>

  <div class="code-container">
      
<script src="/pdf/build/build/pdf.js"></script>
<script src="/pdf/web/viewer.js"></script>


<a target="_blank" href="/pdf/web/viewer.html?file={content:ext_pdf}">在线预览PDF文件</a>


</div>

  {/pboot:if}

首先下载PDF.JS组件，在你的网站根目录创建一个PDF文件夹,上传并且解压到PDF这个目录里。（文件在网页底部）

然后在内容页引入PDF.JS组件

<script src="/pdf/build/build/pdf.js"></script>
<script src="/pdf/web/viewer.js"></script>


<a target="_blank" href="/pdf/web/viewer.html?file={content:ext_pdf}">在线预览PDF文件</a>

完美实现，具体效果如下

手机端：

点击下载：

PDF组件