您现在的位置是:首页 > 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中创建一个留言板表单并调用留言记录涉及两个主要步骤:创建留言提交表单和调用留言记录列表。以下是详细的步骤和代码示例:创建留言提交表单:在PbootCMS中,你可以使
pbootcms二开幻灯片轮播图添加多行文本输入的实现方法
PbootCMS二开幻灯片轮播图添加多行文本输入第一种方式:直接修改原输入框如果不想活着不会新增数据库字段,可以直接通过修改后台页面input框为te
PbootCMS中IF条件语句支持的运算符有哪些
在PbootCMS中,IF条件语句支持多种运算符,用于进行条件判断和逻辑运算。这些运算符可以帮助你在模板中实现复杂的逻辑判断。以下是PbootCMS IF条件语句支持的运算符及其用法:
pbootcms栏目怎么增加栏目简介,pbootcms栏目增加栏目简介字段
pbootcms后台栏目编辑里面默认只有名称和副名称,少了个栏目简介,有时在栏目页面需要调用一段介绍文字,这个时候这个就很重要了,接下来就来一起操作下如何添加栏目简介字段
相关源码
-
(自适应)宽屏农业机械农耕设备类网站pbootcms模板免费下载为农机企业打造的现代化响应式网站模板,自动适配电脑、平板和手机,浏览体验一致,独立页面SEO设置,提升搜索引擎可见度。查看源码 -
自适应新闻资讯技术博客个人网站pbootcms模板该模板基于PbootCMS开源内核深度开发,该模板适用于游戏新闻网站、游戏博客等企业或个人网站,新闻资讯技术博客pbootcms模板;采用六级分辨率断点适配技术查看源码 -
(PC+WAP)蓝色低碳环保隔断板装修装饰类网站pbootcms源码下载本款基于PbootCMS开发的网站模板为活动隔断板、装修装饰行业打造,特别适合移动隔断、环保隔断、办公分区等产品的展示与推广。查看源码 -
自适应黑色建筑装饰设计公司个人工作室pbootcms模板基于PbootCMS内核开发的黑金风格模板,为建筑装饰、工程设计类企业打造,采用开源架构,支持跨行业快速适配,核心优势如下: 查看源码 -
(PC+WAP)红色厨具厨房用品设备pbootcms模板源码下载为厨具设备企业设计的响应式网站模板,采用PbootCMS内核开发,适用于商用厨房设备、家用厨具、厨房用品等企业展示。模板包含产品展示、新闻动态、案例中心等标准模块,助您快速搭建专业级行业网站。查看源码 -
(自适应)水墨风中药馆中医名医介绍pbootcms网站模板本模板基于PbootCMS内核开发,为中医馆、中医药企业量身定制,可快速搭建具有传统文化特色的官方网站。自适应手机端设计,数据实时同步,助您高效展示中医特色诊疗、中药产品、养生知识等内容,塑造专业品牌形象。查看源码
| 分享笔记 (共有 篇笔记) |
相关标签
大家喜欢
- pbootcms建站中常用的组合调用代码集合
- PbootCMS的sqlite数据库转mysql数据库的方法
- pbootcms程序提示:未检测到您服务器环境的sqlite3数据库扩展,请检查php.ini中是否已经开启该扩展!另外,检测到您服务器支持pdo_sqlite扩展,您也可以修改数据库配置连接驱动为p
- pbootcms首页怎么调用全站所有的文章
- pbootcms二开修改网站标题显示方式怎么去掉副标题
- PbootCMS内容中换行符不换行变成<br>的解决方法
- pbootcms栏目页调用当前栏目文章的方法
- 阿里云ECS服务器怎么搭建PbootCMS企业网站
- pbootcms面包屑中的首页改为英文home的方法
- pbootcms网站被黑被篡改的解决方法

