前端实现在线预览pdf、word、xls、ppt等文件
前端实现在线预览pdf、word、xls、ppt等文件
PDF文档在线预览功能
方式一: 通过a标签href属性实现
pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面。在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览
<a href="文档地址"></a>
方式二: 通过jquery插件jquery.media.js实现
这个插件可以实现pdf预览功能(包括其他各种媒体文件)但是对word等类型的文件无能为力。
实现方式:
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.media.js"></script>
html结构:<body><div id="handout_wrap_inner"></div></body>
调用方式:
<script type="text/javascript"> $('#handout_wrap_inner').media({width: '100%',height: '100%',autoplay: true,src:'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',});
</script>
方式三: 直接通过页面内嵌iframe
$("<iframe src='"+ this.previewUrl +"' width='100%' height='362px' frameborder='1'>").appendTo($(".video-handouts-preview"));
此外还可以在iframe标签之间提供一个提示类似这样<iframe :src="previewUrl" width="100%" height="100%">
This browser does not support PDFs. Please download the PDF to view it: <a :href="previewUrl">Download PDF</a>
</iframe>
方式四: 通过标签嵌入内容
<embed :src="previewUrl" type="application/pdf" width="100%" height="100%">
此标签h5特性中包含四个属性:高、宽、类型、预览文件src!
与< iframe > < / iframe > 不同,这个标签是自闭合的的,也就是说如果浏览器不支持PDF的嵌入,那么这个标签的内容什么都看不到!
方式五: 标签和iframe使用差别较小
<object :src="previewUrl" width="100%" height="100%">This browser does not support PDFs. Please download the PDF to view it: <a :href="previewUrl">Download PDF</a>
</object>
方式六: PDFObject
PDFObject实际上也是通过标签实现的直接上代码
<!DOCTYPE html>
<html>
<head><title>Show PDF</title><meta charset="utf-8" /><script type="text/javascript" src='pdfobject.min.js'></script><style type="text/css">html,body,#pdf_viewer{width: 100%;height: 100%;margin: 0;padding: 0;}</style>
</head>
<body><div id="pdf_viewer"></div>
</body>
<script type="text/javascript">if(PDFObject.supportsPDFs){// PDF嵌入到网页PDFObject.embed("index.pdf", "#pdf_viewer" );} else {location.href = "/canvas";}// 还可以通过以下代码进行判断是否支持PDFObject预览if(PDFObject.supportsPDFs){console.log("Yay, this browser supports inline PDFs.");} else {console.log("Boo, inline PDFs are not supported by this browser");}
</script>
</html>
方式七: PDF.js
PDF.js可以实现在html下直接浏览pdf文档,是一款开源的pdf文档读取解析插件,非常强大,能将PDF文件渲染成Canvas。PDF.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js,一个负责API解析,一个负责核心解析。
Office文档在线预览功能
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>
word文件
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>
excel文件
目前excel文件已经有了类似pdf.js那样的解析sheet.js
总结
1、免费纯前端方式实现在线预览word、excel、ppt最优选择微软在线预览(不可编辑)
2、利用后端将文件转为图片,前端以图片形式预览(可行方案)
3、购买在线预览服务例如百度DOC文档服务、永中、I DOC VIEW等
前端实现在线预览pdf、word、xls、ppt等文件相关推荐
- html js 在线预览 pdf word xls等
1.前端实现pdf文件在线预览功能 方式一.pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面.在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览 <a ...
- js在线预览pdf,doc,xls,jpg等文件
由于项目需要,需要在上传文件后在线预览所上传的文件.最开始我的思路就是想到各种插件什么的.比如说pdf.js.pdfobject,但最后都没能达到我所想要的效果. 最后我发现,原来,只需要一个很简单的 ...
- 在线浏览pdf doc html,前端实现在线预览pdf、word、xls、ppt等文件
1.前端实现pdf文件在线预览功能 方式一: 通过a标签href属性实现 pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面.在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签hr ...
- 浏览器在线预览pdf、txt、office文件
//使用文件预览的原因是:TMD微信浏览器屏蔽掉文件下载链接,只好折中使用文件在线预览功能//要点:1.office文件用微软的插件打开http://view.officeapps.live.com/ ...
- 【前端实现在线预览ppt、word、xls、pdf、视频】
前端实现在线预览ppt.word.xls.pdf.视频 一. 预览ppt.word.xls 注意:无法打开文档? 二. pdf 三. 视频预览 一. 预览ppt.word.xls 转载地址: http ...
- 前端【vue】实现文档在线预览功能,在线预览pdf、word、xls、ppt等office文件
前端江太公 前端实现文档在线预览功能 最直接的就是使用XDOC 文档云服务 XDOC可以实现预览以DataURI表示的DOC文档,此外XDOC还可以实现文本.带参数文本.html文本.json文本.公 ...
- spring boot2.X word在线预览 pdf.js
最近公司项目需求需要在线预览word文档,并且不能在在线下载和编辑.在此记录我是如何做的. 针对word的在线预览网上大多给的解决方案就是先把word文件转成pdf,然后通过pdf.js在线预览pdf ...
- 前端页面预览word_前端实现在线预览文档
前端实现在线预览文档 发布时间:2019-06-03 17:22, 浏览次数:529 <>前端实现在线预览文档 最近项目开发中需要实现在线预览Word,Excel,PowerPoint格式 ...
- 前端实现在线预览文档
前端实现在线预览文档 最近项目开发中需要实现在线预览Word,Excel,PowerPoint格式的文档,网上查找了很多资源,各说纷纭,但是在一一尝试之后只有使用微软的预览接口才能成功,其他的会出现各 ...
- 前端-Excel在线预览
前端-Excel在线预览 最近项目中有一个 Excel 预览的需求,就调研了一下 xls/xlsx.word.ppt 文件在线预览功能的实现 . 实现 xls/xlsx.word.ppt 在线预览功能 ...
最新文章
- memcached实现集群中的session共享存储优缺点
- iOS 9应用开发教程之使用开关滑块控件以及滚动部署视图
- 拉勾启源老师mysql讲义,【拉勾教育数据分析实战训练营】--Tableau学习笔记-重点回顾1...
- Java引用类型有哪些
- word文档图标变成白纸_挽救你的文件 修复变成乱码的Word文档
- python utc 时间
- linux系统添加环境变量
- 《Go 语言程序设计》读书笔记 (九) 命令工具集
- linux/windows下查看目标文件.a/.lib的函数符号名称
- 中缀表达式转后缀表达式(非常简单易懂)
- window2008 、 oracle11.2g 无法imp,dmp。
- 小乌龟Git回滚重置及合并指定提交
- php 威盾加密解密,解析php加密解密混淆的手段,如 phpjm,phpdp神盾,php威盾
- Cookie测试之详解
- Python微博项目
- RTI路由服务入门手册
- 直流电源EMI滤波器的设计
- 250. Count Univalue Subtrees
- 整合营销系统推荐乐云seo_珠海整合营销【乐云seo】
- php大商创 安装,【大商创使用教程】大商创2.0数据库配置及安装教程
热门文章
- 支持有道词典单词本更新
- 信息安全等级保护三级要求,安全管理机构多年测评经验分享
- 计算机d盘无法格式化,四种方法解决D盘无法格式化问题
- WebSocket connection to ‘ws://localhost:8081/ws‘ failed: Invalid frame header
- rtsp、rtmp测试地址
- 初识STM32之选型
- matlab 三对角矩阵 追赶法,计算方法追赶法解三对角矩阵方程
- 灵格斯怎么屏幕取词_灵格斯词霸怎么屏幕取词
- Go语言-测试与性能分析
- 利用Python的openpyxl对Excel实现空白单元格的填充