您现在的位置是:首页 > cms教程 > PbootCMS教程PbootCMS教程
pbootcms如何嵌入PDF在线预览功能实现代码示例
章学共2024-08-29PbootCMS教程已有人查阅
导读今天用户有需求,电脑端嵌入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判断代码
然后在内容页引入PDF.JS组件
当有这个需求的时候想到的就是最基础的<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>
完美实现。
本文标签:
很赞哦! ()
图文教程
PbootCMS调用指定栏目所有单页内容的实现方法
在PbootCMS中,要一次性获取一个栏目下所有专题模型(即单页内容),可以使用模板标签 {pboot:nav} 和 {pboot:content} 来实现。下面是一个具体的示例代码
PbootCMS网站安全设置防止被黑被篡改
为了提高PbootCMS的安全性,确保网站不会轻易受到攻击,可以采取一系列安全防护措施。以下是详细的步骤和建议:后台路径修改:将默认后台登录路径 admin.php 修改为其他名称,如 xxx.php。
pbootcms表单使用Ajax无刷新提交留言的方法
PbootCMS本身对于使用ajax请求进行提交时会返回Json数据,那么我们可以无需使用API的情况下实现ajax提交留言,并自定义页面提示,提升用户体验。
pbootcms编辑器去除HTML标签的方法
描述: 在使用 PbootCMS 的编辑器时,插入的 HTML 代码中的某些标签(如)会被自动去除或转换为标签。
相关源码
-
(PC+WAP)绿色资源回收新能源环保设备pbootcms源码下载基于PbootCMS系统深度开发的环保行业模板,特别适配资源回收设备、新能源技术、环境治理装备等企业的线上展示需求。集成产品库、解决方案、环保案例等专业模块,助力企业高效传递绿色价值。查看源码 -
html5响应式pbootcms模板新闻资讯博客网站源码该模板采用PbootCMS内核开发,专为新闻资讯类网站打造,同时具备高度行业适配性--只需替换图文内容即可快速转型为企业官网、行业门户等各类站点。查看源码 -
(PC+WAP)蓝色钢结构机械五金工程建筑基建营销型pbootcms模板下载于PbootCMS开发的钢结构与工程机械专用模板,助力企业构建专业级产品展示平台;模板内置工程案例展示、产品参数对照表等专业模块,预设项目进度、施工方案等建筑行业专属栏目查看源码 -
响应式粉色美容整形化妆品pbootcms网站模板开源源码该网站模板为美容整形、化妆品企业设计,采用响应式布局确保在手机、平板及PC端自动适配显示效果。基于PbootCMS内核开发,支持一键替换图文内容快速转换至其他行业应用。查看源码 -
(自适应响应式)电子数码科技产品介绍带留言网站模板下载为电子产品企业设计的展示系统,集成智能产品对比器、参数规格表和展示模块。支持消费电子、智能设备等多级分类展示,内置产品技术参数数据库。查看源码 -
(PC+手机)帝国cms7.5漫画图片连载网站源码免费下载本模板基于帝国CMS7.5深度开发,为漫画阅读类网站打造。整体设计风格贴合漫画行业特性,界面布局充分考虑漫画作品的展示需求,支持多种漫画阅读模式。模板采用响应式设计,能够自动适配PC端和移动端设备,为读者提供流畅的阅读体验。查看源码
分享笔记 (共有 篇笔记) -

