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 相关文章推荐
纯CSS绘制漂亮的圆形图案效果
May 07 HTML / CSS
CSS3属性background-size使用指南
Dec 09 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
CSS3实现红包抖动效果
Dec 23 HTML / CSS
HTML5 与 XHTML2
Oct 17 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
Aug 07 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
Oct 14 HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 HTML / CSS
HTML5中使用json对象的实例代码
Sep 10 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 HTML / CSS
HTML中的表格元素介绍
Feb 28 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
默默小谈PHP&amp;MYSQL分页原理及实现
2007/01/02 PHP
PHP Google的translate API代码
2008/12/10 PHP
PHP 开源AJAX框架14种
2009/08/24 PHP
php上传文件中文文件名乱码的解决方法
2013/11/01 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
JQuery 的跨域方法推荐_可跨任何网站
2016/05/18 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
2017/03/04 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
2018/02/13 jQuery
VUE重点问题总结
2018/03/19 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
node.js Promise对象的使用方法实例分析
2019/12/26 Javascript
如何实现小程序与小程序之间的跳转
2020/11/04 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
python设置windows桌面壁纸的实现代码
2013/01/28 Python
zbar解码二维码和条形码示例
2014/02/07 Python
Python三种遍历文件目录的方法实例代码
2018/01/19 Python
django缓存配置的几种方法详解
2018/07/16 Python
python内置数据类型之列表操作
2018/11/12 Python
对pandas的算术运算和数据对齐实例详解
2018/12/22 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
初中女生自我鉴定
2013/12/19 职场文书
写自荐信要注意什么
2013/12/26 职场文书
幼儿园家长会邀请函
2014/01/15 职场文书
淘宝客服自我总结鉴定
2014/01/25 职场文书
人事助理自荐信
2014/02/02 职场文书
商场促销活动方案
2014/02/08 职场文书
项目合作协议书
2014/04/16 职场文书
世界卫生日宣传活动总结
2015/02/09 职场文书