前端实现在线预览pdf、word、xls、ppt等文件
最近在做一个公司的资源管理系统,一些知识小记一下。
1、前端实现pdf文件在线预览功能
方式一、pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面。在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览
<a href="文档地址"></a>
方式二、通过jquery插件jquery.media.js实现
这个插件可以实现pdf预览功能(包括其他各种媒体文件)但是对word等类型的文件无能为力。
实现方式:
js代码:
<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>
调用方式:
$('#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>标签嵌入内容
<embed :src="previewUrl" type="application/pdf" width="100%" height="100%">
此标签h5特性中包含四个属性:高、宽、类型、预览文件src!
与< iframe > < / iframe > 不同,这个标签是自闭合的的,也就是说如果浏览器不支持PDF的嵌入,那么这个标签的内容什么都看不到!
方式五、<object>标签和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实际上也是通过<embed>标签实现的直接上代码
<!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";
}
</script>
</html>
还可以通过以下代码进行判断是否支持PDFObject预览
if(PDFObject.supportsPDFs){
console.log("Yay, this browser supports inline PDFs.");
} else {
console.log("Boo, inline PDFs are not supported by this browser");
}
方式七、PDF.js
PDF.js可以实现在html下直接浏览pdf文档,是一款开源的pdf文档读取解析插件,非常强大,能将PDF文件渲染成Canvas。PDF.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js,一个负责API解析,一个负责核心解析。
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就是要实现预览的文件地址
具体文档看这微软接口文档
3、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>
前端实现在线预览pdf、word、xls、ppt等文件的更多相关文章
- 前端实现在线预览pdf、docx、xls、ppt等文件
思路:前台将各种格式的附件上传到服务器----后台通过方法将这些格式的文件转化成图片,前台通过放映ppt的方式将其展示在页面上. 关键点:reveal.js 参考文章:https://www.awes ...
- 浏览器在线预览pdf、txt、office文件
//使用文件预览的原因是:TMD微信浏览器屏蔽掉文件下载链接,只好折中使用文件在线预览功能//要点:1.office文件用微软的插件打开 http://view.officeapps.live.com ...
- .net mvc使用FlexPaper插件实现在线预览PDF,EXCEL,WORD的方法
FlexPaper插件可以实现在浏览器中在线预览pdf,word,excel等. 在网上看到很多关于这个插件实现预览的技术,但是很难做到word和excel在线预览. pdf很好实现. 首先下载相关的 ...
- pc或者微信上用pdf.js在线预览pdf和word
最近项目要求pdf和word可以在线预览功能,pc端还好解决,但是微信端就有点坑了,pc端原来的思路是将文件转成base64,然后用html格式显示 ,但是微信端不支持, 这种方式就pass掉了,谷歌 ...
- 网页中动态嵌入PDF文件/在线预览PDF内容https://www.cnblogs.com/xgyy/p/6119459.html
#网页中动态嵌入PDF文件/在线预览PDF内容# 摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如 ...
- FlexPaper+SWFTool+操作类=在线预览PDF
引言 由于客户有在线预览PDF格式的需求,在网上找了一下解决方案,觉得FlexPaper用起来还是挺方便的,flexpaper是将pdf转换为swf格式的文件预览的,所以flexpaper一般和swf ...
- 在线预览PDF
FlexPaper+SWFTool+操作类=在线预览PDF 引言 由于客户有在线预览PDF格式的需求,在网上找了一下解决方案,觉得FlexPaper用起来还是挺方便的,flexpaper是将pdf ...
- FlexPaper+SWFTool+操作类=在线预览PDF(转)
引言 由于客户有在线预览PDF格式的需求,在网上找了一下解决方案,觉得FlexPaper用起来还是挺方便的,flexpaper是将pdf转换为swf格式的文件预览的,所以flexpaper一般和swf ...
- WEB在线预览PDF
这是我在博客园发表的第一篇文章.以后会陆续把在线预览其他格式文档的解决方案发表出来. 解决思路:把pdf转换成html显示. 在线预览pdf我暂时了解3种解决方案,欢迎大家补充. 方案一: 利用pdf ...
随机推荐
- IDEA发布应用时发布到lib下面的包不全
IDEA发布应用时发布到lib下面的包不全,Tomcate启动时就报:At least one JAR was scanned for TLDs yet contained no TLDs. Enab ...
- prototype和_proto_
__proto__(隐式原型)与prototype(显式原型) 显式原型 explicit prototype property:用来实现基于原型的继承与属性的共享. 每一个函数在创建之后都会拥有一个 ...
- 单点登录系统---SSO
1.------------------SSO介绍--------------------------------- 有什么卵用?搞什么飞机的? 大家看看这个图,一个系统是没有问题.如果是分布式的系统 ...
- Spring Boot 揭秘与实战(二) 数据存储篇 - JPA整合
文章目录 1. 环境依赖 2. 数据源 3. 脚本初始化 4. JPA 整合方案一 通过继承 JpaRepository 接口 4.1. 实体对象 4.2. DAO相关 4.3. Service相关 ...
- Python中的print、input函数以及Python中交换两个变量解析
一.Python中的值交换操作 首先明确一点点,Python中的一切都是面向对象的,可以理解为Python的中一切都是对象. 我们知道Java也是面向对象的语言,但是在Java中定义一个值变量如下: ...
- 一些简单二分题,简单的hash,H(i),字符串题
说在前面: 题是乱七八糟的. 几个二分的题. (但是我的做法不一定是二分,有些裸暴力. 1. Equations HDU - 1496 输入a,b,c,d问你这个方程有多少解.a*x1^2+b*x2^ ...
- Unity3D UGUI下拉菜单/Dropdown组件用法、总结
Unity3D中UGUI实现下拉菜单 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- ...
- 快排 - 快速排序算法 (Chinar出品 简单易懂)
Quicksort 快排的简单讲解 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- ...
- SEO : 建站注意
1.url格式.尽可能的短一些,实践证明,较短的url格式还是比较利于搜索引擎收录的. 2.网站前台要纯静态.虽然搜索引擎对静态页面和动态页面并没有本质上的差别对待,但是实践告诉我们静态页面对服务器的 ...
- 斐波那契 - pythoon实现
def fn_1(n): if n == 0 : return n elif n == 1 : return n else: a = [0,1] for i in range(2,n): a.appe ...