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 相关文章推荐
前端隐藏出边界内容的实现方法
Apr 14 HTML / CSS
CSS3制作酷炫的条纹背景
Nov 09 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
Jul 05 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 HTML / CSS
HTML5实现表单自动验证功能实例代码
Jan 11 HTML / CSS
将SVG图引入到HTML页面的实现
Sep 20 HTML / CSS
5分钟实现Canvas鼠标跟随动画背景
Nov 18 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
Sep 16 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
Sep 23 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
Feb 24 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 HTML / CSS
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
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
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
239军机修复记
2021/03/02 无线电
Php Cookie的一个使用注意点
2008/11/08 PHP
PHP 过滤页面中的BOM(实现代码)
2013/06/29 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
ThinkPHP5框架缓存查询操作分析
2018/05/30 PHP
php精度计算的问题解析
2019/06/21 PHP
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
2015/05/03 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
JQuery菜单效果的两个实例讲解(3)
2015/09/17 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
微信小程序之滚动视图容器的实现方法
2017/09/26 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
vux uploader 图片上传组件的安装使用方法
2018/05/15 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
numpy.random.seed()的使用实例解析
2018/02/03 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
python3实现逐字输出的方法
2019/01/23 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
Django静态文件加载失败解决方案
2020/08/26 Python
容易被忽略的Python内置类型
2020/09/03 Python
英国在线药房:Express Chemist
2019/03/28 全球购物
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
外贸员简历中的自我评价
2014/03/04 职场文书
会计系毕业求职信
2014/08/07 职场文书
中秋节寄语2015
2015/03/24 职场文书
舞出我人生观后感
2015/06/16 职场文书
大学副班长竞选稿
2015/11/21 职场文书