HTML里显示pdf、word、xls、ppt
2020-04-13 08:53:54来源:博客园 阅读 ()
HTML里显示pdf、word、xls、ppt
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>
原文链接:https://www.cnblogs.com/gxp69/p/12690360.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- Html/css 列表项 区分列表首尾 2020-06-11
- HTML骨架 2020-06-10
- HTML基础教程_1 2020-06-09
- HTML基础02 2020-06-09
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash