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禁用输入法(CSS3 UI规范)实例解析
Dec 04 HTML / CSS
CSS中几个与换行有关的属性简明总结
Apr 15 HTML / CSS
css3 伪元素和伪类选择器详解
Sep 04 HTML / CSS
网页切图的CSS和布局经验与要点
Apr 09 HTML / CSS
用HTML5制作烟火效果的教程
May 12 HTML / CSS
使用HTML5里的classList操作CSS类
Jun 28 HTML / CSS
HTML5如何使用SVG的方法示例
Jan 11 HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
Nov 10 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 HTML / CSS
HTML+CSS制作心跳特效的实现
May 26 HTML / CSS
CSS实现九宫格布局(自适应)的示例代码
Feb 12 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图片加水印原理(超简单的实例代码)
2013/01/18 PHP
PHP查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
JS实现FLASH幻灯片图片切换效果的方法
2015/03/04 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
[54:33]2018DOTA2亚洲邀请赛小组赛 A组加赛 Liquid vs Optic
2018/04/03 DOTA
Python表示矩阵的方法分析
2017/05/26 Python
Python实现进程同步和通信的方法
2018/01/02 Python
用pandas中的DataFrame时选取行或列的方法
2018/07/11 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
TensorFlow索引与切片的实现方法
2019/11/20 Python
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
“型”走纽约上东区:Sam Edelman
2017/04/02 全球购物
Javascript如何发送一个Ajax请求
2015/01/26 面试题
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
给国外客户的邀请函
2014/01/30 职场文书
学校卫生检查制度
2014/02/03 职场文书
自动化毕业生专业自荐书范文
2014/02/04 职场文书
英语教师自荐信
2014/05/26 职场文书
求职教师自荐书
2014/06/19 职场文书
英语专业求职信
2014/07/08 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
会计实训总结范文
2015/08/03 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python