html实现在线预览文件功能(图文详解)
导读:收集整理的这篇文章主要介绍了html实现在线预览文件功能(图文详解),觉得挺不错的,现在分享给大家,也给大家做个参考。htML实现在线预览文件功能(图文详解)word+excle+pDF表格在线浏览通过iframe直接引用微软提供的方法&l...
收集整理的这篇文章主要介绍了html实现在线预览文件功能(图文详解),觉得挺不错的,现在分享给大家,也给大家做个参考。htML实现在线预览文件功能(图文详解)
word+excle+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实现在线预览文件功能(图文详解)的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: html实现在线预览文件功能(图文详解)
本文地址: https://pptw.com/jishu/590855.html