2024-05-04 237浏览
月费会员45元
年费会员88元
终身会员298元(送展示平台)
2024-05-04 237浏览
今天用户有需求,电脑端嵌入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>
完美实现,具体效果如下
手机端:
当然这个组件也可以完美运行到其他CMS或者html里,站长参考文档如下
https://blog.csdn.net/judykang123/article/details/103305823
外贸建站中,如何获取WhatsApp链接
02迅睿cms配置微信公众号开发服务器配置提示“参数错误,请重新填写。”的问题解决办法
03PbootCMS后台关闭验证码,登录提示验证码不能空的解决方法
04迅睿cms如何判断设置-网站信息里的自定义字段
05PBOOTCMS添加子管理员后,点击清理缓存按钮提示您的账号权限不足,您无法执行该操作!的处理方法
06访问PBOOTCMS网站,提示PbootCMS程序运行异常: Modulo by zero
07PbootCMS后台登陆密码忘记/找回密码后台登录密码插件
08PBOOTCMS网站访问页面提示:您访问的页面不存在,请核对后重试!如何改成自动404跳转页面
09PbootCMS模板安装与授权方法
10pbootcms网站后台 百度普通收录推送发生错误:site error