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的rem属性制作响应式页面布局的要点解析
May 24 HTML / CSS
介绍CSS3使用技巧5个
Apr 02 HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 HTML / CSS
利用CSS3 动画 绘画 圆形动态时钟
Mar 20 HTML / CSS
css3实现元素环绕中心点布局的方法示例
Jan 15 HTML / CSS
animation和transition的区别
Oct 12 HTML / CSS
HTML5实现视频直播功能思路详解
Nov 16 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 HTML / CSS
如何用canvas实现在线签名的示例代码
Jul 10 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
Aug 28 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
Aug 23 HTML / CSS
HTML5 body设置自适应全屏
May 07 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 进程锁定问题分析研究
2009/11/24 PHP
PHP中删除变量时unset()和null的区别分析
2011/01/27 PHP
php之XML转数组函数的详解
2013/06/07 PHP
Yii2中添加全局函数的方法分析
2017/05/04 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
JS OOP包机制,类创建的方法定义
2009/11/02 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
详解AngularJS controller调用factory
2017/05/19 Javascript
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
2019/10/16 Javascript
Vue防止白屏添加首屏动画的实例
2019/10/31 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
在Python中操作字符串之rstrip()方法的使用
2015/05/19 Python
Python图像处理之图像的缩放、旋转与翻转实现方法示例
2019/01/04 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
Pandas库之DataFrame使用的学习笔记
2019/06/21 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
python如何构建mock接口服务
2021/01/28 Python
双立人加拿大官网:Zwilling加拿大
2020/08/10 全球购物
大型活动策划方案
2014/01/12 职场文书
初三学生个人自我评定
2014/04/06 职场文书
个性婚礼策划方案
2014/05/17 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
公安局副政委班子个人对照检查材料
2014/10/04 职场文书