您现在的位置是：首页 > cms教程 > pbootcms教程pbootcms教程

pbootcms如何嵌入PDF在线预览功能实现代码示例

章学共2024-08-29 21:43:32pbootcms教程已有9人查阅

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

今天用户有需求，电脑端嵌入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>