详解html实现在线预览word、excel、pdf等文件的功能（附代码）

码农天地 - 2020-06-20 13:57:15

---

详解html实现在线预览word、excel、pdf等文件的功能（附代码）

本文讲述了html是如何实现动态在线预览word、excel、pdf等文件的功能，该功能十分的方便，大家一起来看看吧，如有什么不足，还望大家指出。

通过iframe直接引用微软提供的方法

<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>

在 https://view.officeapps.live.com/op/view.aspx?src= 后边添加需要预览的内容

注意：链接包含中文需要进行URL编码，并且文档必须可在Internet上公开访问

官方使用文档

pdf在线浏览

PDF.js下载地址

http://jhyt.oss-cn-shanghai.aliyuncs.com/images/1531367199089_PDFObject.js

使用方法

引入pdf.js文件

<script src="./js/PDF/PDFObject.js" type="text/javascript"></script>c

创建有个p用于展示

<p id="example1"></p>

通过js动态添加需要浏览的pdf地址

var options = { height: "550px", pdfOpenParams: {view: 'FitV', page: '0' }, name:"mans", fallbackLink: "<p>您的浏览器暂不支持此pdf，请下载最新的浏览器</p>" };PDFObject.embed(url, "#example1",options);

预览效果

感谢大家的阅读，希望大家有所收益。

本文转自：https://blog.csdn.net/superKM/article/details/81013304

推荐教程： 《HTML教程》

以上就是详解html实现在线预览word、excel、pdf等文件的功能（附代码）的详细内容，更多请关注php中文网其它相关文章！

微信分享相关标签：html 在线预览本文转载于：CSDN，如有侵犯，请联系a@php.cn删除上一篇：适合小白学习的前端页面知识（值得一看）下一篇：html中字体如何实现加粗（方法介绍）

相关文章

相关视频

html怎么设置背景图片全屏平铺？html空格代码怎么写？html中表示内嵌css样式的标记是什么?如何用html标记语言编写一个简单的网页详解html实现在线预览word、excel、pd...HTML的表单应用（五）HTML完结和想说的话HTML开篇

网友评论

文明上网理性发言，请遵守 新闻评论服务协议

我要评论立即提交专题推荐独孤九贱-php全栈开发教程

全栈 100W+

主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门

玉女心经-web前端开发教程

入门 50W+

主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门

天龙八部-实战开发教程

实战 80W+

主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习

作者信息

烟雨青岚

认证0级讲师

最近文章在excel中公式定义的开头符号是什么？844打开任务管理器的快捷键是Ctrl+shift+del吗？301excel怎么在一列前面加同一个字？491发布技术文章最新文章热门排行

html中字体如何实现加粗（方法介绍）详解html实现在线预览word、excel、pdf等文件的功能（附代码）适合小白学习的前端页面知识（值得一看）如何用html标记语言编写一个简单的网页html实现在线预览文件功能（图文详解）值得一看的html5实现简单老虎机的教程（游戏开发）html简单日历的实现（附源码）html新手入门必学知识点

404 not found是什么意思DOM是什么意思html是什么如何制作一个简单的HTML登录页面（附代码）六款好用的html5编辑器HTML编辑器有哪些？最好用的4款HTML编辑器推荐url是什么意思？html怎样设置背景颜色？HTML背景颜色代码详细分析推荐视频教程HTML+CSS网页基础HTML 代码实例HTML5 极速入门视频教程分类php视频教程html视频教程css视频教程JS视频教程jQuery视频教程mysql视频教程Linux视频教程Python视频教程article_status = 685133;网站首页 PHP视频PHP实战PHP代码PHP手册词条手记编程词典

php中文网：公益在线php培训，帮助PHP学习者快速成长！ 合肥彼岸互联信息技术有限公司

Copyright 2014-2020 https://www.php.cn/ All Rights Reserved | 皖B2-20150071-9 皖公网安备 34010402701654号 关于我们免责申明赞助与捐赠广告合作

座机号码：0551-64933227  安徽省合肥市政务新区置地广场D座2101

  var _hmt = _hmt || [];(function(){var hm = document.createElement("script");hm.src="//hm.baidu.com/hm.js?8cc45d54c337ca616c34b1cf747da91c";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();(function(){var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];if(curProtocol === 'https'){bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';}else{bp.src = 'http://push.zhanzhang.baidu.com/push.js';};var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(bp, s);})();$('.content').viewer();

Tags 标签