HTML里显示pdf、word、xls、ppt的方法示例


Posted in HTML / CSS onApril 14, 2020

1、PDF文件在线预览

1.HTML5新标签<embed>定义和用法

<embed> 标签定义嵌入的内容,这个标签是自闭合的的,也就是说如果浏览器不支持PDF的嵌入,那么这个标签的内容什么都看不到。

实例

<embed src="/file/操作手册.pdf" type="application/pdf" width="100%" height="100%" />

2.<iframe>

<iframe>方法是嵌入PDF的最简单方法之一。但是,如果<iframe>浏览器不支持PDF呈现,则可能无法提供足够的后备内容。

实例

<iframe src="您的PDF地址" width="100%" height="100%">
该浏览器无法支持PDF,请点击查看:

<a href="PDF地址">下载 PDF</a>
</iframe>

3.<object>

与<embed>不同,<object>如果浏览器不支持PDF嵌入,则该元素可提示内容。所有浏览器都支持<object>元素,但是,每个浏览器中的实现方式通常存在差异。如果您使用该<object>元素,请务必在浏览器和操作系统中彻底测试您的页面。

实例

<object data="/file/操作手册.pdf" type="application/pdf" width="100%" height="100%">
该浏览器不支持PDF.请点击查看:
<a href="/file/操作手册.pdf">Download PDF</a>.</p>
</object>

2、word、xls、ppt在线预览

word、ppt、xls文件实现在线预览的方式比较简单可以直接通过调用微软的在线预览功能实现 (预览前提:资源必须是公共可访问的)

<iframe src='https://view.officeapps.live.com/op/view.aspx?src=http://storage.xuetangx.com/public_assets/xuetangx/PDF/1.xls' width='100%' height='100%' frameborder='1'>
</iframe>

src就是要实现预览的文件地址

补充:google的文档在线预览实现同微软(资源必须是公共可访问的),但是需要翻墙

<iframe src="https://docs.google.com/viewer?url=fileurl"></iframe>

3、XDOC在线预览

XDOC可以实现预览以DataURI表示的DOC文档,此外XDOC还可以实现文本、带参数文本、html文本、json文本、公文等在线预览,具体实现方法请看官方文档

下面这种方式可以实现快速预览word但是对文件使用的编辑器可能会有一些限制

<a href="http://www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=http://www.xdocin.com/demo/demo.docx" target="_blank" rel="nofollow">XDOC</a>

到此这篇关于HTML里显示pdf、word、xls、ppt的方法示例的文章就介绍到这了,更多相关HTML显示pdf、word、xls、ppt内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3中的注音对齐属性ruby-align用法指南
Jul 01 HTML / CSS
css3实现一款模仿iphone样式的注册表单
Mar 20 HTML / CSS
使用css3和jquery实现可伸缩搜索框
Feb 12 HTML / CSS
css3实现垂直下拉动画菜单示例
Apr 22 HTML / CSS
一款利用纯css3实现的win8加载动画的实例分析
Dec 11 HTML / CSS
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 HTML / CSS
详解CSS3中nth-child与nth-of-type的区别
Jan 05 HTML / CSS
css3 transform过渡抖动问题解决
Oct 23 HTML / CSS
把富文本的回车转为br标签
Aug 09 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
Jul 02 HTML / CSS
带你认识HTML5中的WebSocket
May 22 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
Nov 11 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
Apr 14 #HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
Apr 10 #HTML / CSS
canvas 基础之图像处理的使用
Apr 10 #HTML / CSS
用canvas显示验证码的实现
Apr 10 #HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
Apr 08 #HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
Apr 08 #HTML / CSS
HTML5 textarea高度自适应的两种方案
Apr 08 #HTML / CSS
You might like
Apache中php.ini的设置方法
2013/02/28 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
php实现无限级分类
2014/12/24 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
JS 数字转换研究总结
2013/12/26 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
Vue实现验证码功能
2019/12/03 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
利用python爬取软考试题之ip自动代理
2017/03/28 Python
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
Python socket实现简单聊天室
2018/04/01 Python
python实现黑客字幕雨效果
2018/06/21 Python
浅谈Python里面小数点精度的控制
2018/07/16 Python
Python pymongo模块常用操作分析
2018/09/01 Python
python微元法计算函数曲线长度的方法
2018/11/08 Python
python使用PyQt5的简单方法
2019/02/27 Python
浅谈Tensorflow加载Vgg预训练模型的几个注意事项
2020/05/26 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
浅谈css3中的渐进增强和优雅降级
2017/12/01 HTML / CSS
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
什么是属性访问器
2015/10/26 面试题
毕业生的自我评价分享
2013/12/18 职场文书
表决心的诗句大全
2014/03/11 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书