思路：前台将各种格式的附件上传到服务器----后台通过方法将这些格式的文件转化成图片，前台通过放映ppt的方式将其展示在页面上。

关键点：reveal.js

参考文章：https://www.awesomes.cn/repo/hakimel/reveal.js

百度文库预览ppt:https://wenku.baidu.com/browse/getbcsurl?doc_id=9c6b472924c52cc58bd63186bceb19e8b8f6ec06&pn=1&rn=99999&type=ppt&callback=jQuery1101044933827714500585_1566757047431&_=1566757047432

总结：预览.pdf文件可以直接在浏览器中打开

总结

1、免费纯前端方式实现在线预览word、excel、ppt最优选择微软在线预览（不可编辑）
2、利用后端将文件转为图片，前端以图片形式预览（可行方案）
3、购买在线预览服务例如百度DOC文档服务、永中、I DOC VIEW等

https://www.idocv.com/examples.html     I DOC VIEW等  标重点 要钱

1.预览doxc文档：https://view.officeapps.live.com/op/view.aspx?src=http://mczaiyun.top/ht/3.docx      //内网不可用，可惜了

<a href="http://www.xdocin.com/xdoc?_func=to&amp;_format=html&amp;_cache=1&amp;_xdoc=http://www.xdocin.com/demo/demo.docx" target="_blank" rel="nofollow">XDOC</a>//方法一致，内网不可用，可惜了
 
借助微软提供的方法，但是内网是不可用的，所有这个方法passed掉~~

2.预览pdf文档：

2.1

可以直接a标签重开一个页面进行预览

<a href="http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf" target="_blank">PPT在线预览</a>
适用场景：
 首次进来的时候只显示文件名称，当点击预览的时候，才会重新打开一个窗口进行预览
2.2

PDFObject.js （这种方法ie浏览器不支持）
<!DOCTYPE html>

<html>

<head>

    <title>Show PDF</title>

    <meta charset="utf-8" />

    <script type="text/javascript" src='http://jhyt.oss-cn-shanghai.aliyuncs.com/images/1531367199089_PDFObject.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>
 
 2.2
 

代码地址：下载运行可以使用：https://github.com/zhongqiulan/ppt   //内网可以使用，非常好

关键知识点：jquery.media.js插件

3.

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>

参考文章：

1。https://www.iteye.com/blog/vtrtbb-601267     java转换ppt为图片   （后台看的）

3.预览图片：jQuery-fancybox图片//内网可以使用，非常棒

4.https://www.kissfree.cn/2778.html

前端实现在线预览pdf、word、xls、ppt等文件

参考博客：

1.https://blog.csdn.net/fyhx2010/article/details/69569310     docx、ppt、xls、pdf文件转html  注：这篇文章是给我们后台看的

我真厉害，既做前端又操后台的心

前端实现在线预览pdf、docx、xls、ppt等文件的更多相关文章

  1. 前端实现在线预览pdf、word、xls、ppt等文件

    最近在做一个公司的资源管理系统,一些知识小记一下. 1.前端实现pdf文件在线预览功能 方式一.pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面.在仅仅是预览pdf文件且UI要求不高的情况下 ...

  2. 浏览器在线预览pdf、txt、office文件

    //使用文件预览的原因是:TMD微信浏览器屏蔽掉文件下载链接,只好折中使用文件在线预览功能//要点:1.office文件用微软的插件打开 http://view.officeapps.live.com ...

  3. .net mvc使用FlexPaper插件实现在线预览PDF,EXCEL,WORD的方法

    FlexPaper插件可以实现在浏览器中在线预览pdf,word,excel等. 在网上看到很多关于这个插件实现预览的技术,但是很难做到word和excel在线预览. pdf很好实现. 首先下载相关的 ...

  4. FlexPaper+SWFTool+操作类=在线预览PDF

    引言 由于客户有在线预览PDF格式的需求,在网上找了一下解决方案,觉得FlexPaper用起来还是挺方便的,flexpaper是将pdf转换为swf格式的文件预览的,所以flexpaper一般和swf ...

  5. 在线预览PDF

    FlexPaper+SWFTool+操作类=在线预览PDF   引言 由于客户有在线预览PDF格式的需求,在网上找了一下解决方案,觉得FlexPaper用起来还是挺方便的,flexpaper是将pdf ...

  6. FlexPaper+SWFTool+操作类=在线预览PDF(转)

    引言 由于客户有在线预览PDF格式的需求,在网上找了一下解决方案,觉得FlexPaper用起来还是挺方便的,flexpaper是将pdf转换为swf格式的文件预览的,所以flexpaper一般和swf ...

  7. WEB在线预览PDF

    这是我在博客园发表的第一篇文章.以后会陆续把在线预览其他格式文档的解决方案发表出来. 解决思路:把pdf转换成html显示. 在线预览pdf我暂时了解3种解决方案,欢迎大家补充. 方案一: 利用pdf ...

  8. 用pdf.js实现在移动端在线预览pdf文件

    用pdf.js实现在移动端在线预览pdf文件1.下载pdf.js    官网地址:https://mozilla.github.io/pdf.js/ 2.配置    下载下来的文件包,就是一个demo ...

  9. 网页中动态嵌入PDF文件/在线预览PDF内容https://www.cnblogs.com/xgyy/p/6119459.html

    #网页中动态嵌入PDF文件/在线预览PDF内容# 摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如 ...

随机推荐

  1. TCP/IP学习笔记8--数据链路之基本概念

    "在你生命的最初30年中,你养成习惯:在你生命的最后30年中,你的习惯决定了你."---- Steve Jobs TCP/IP对于OSI参考模型的数据链路成及以下部分(物理层)没有 ...

  2. IDEA设置方法注释生成模板

    1.在项目设置里面找到Editor-Live Templates(默认设置里没有这个),然后点击右边的+号,选择Template Group,创建模板组,我这里起名叫Silentdoer: 2.选中自 ...

  3. Spyder中报错： Check failed: PyBfloat16_Type.tp_base != nullptr

    报错问题: 问题1:tensorflow/python/lib/core/bfloat16.cc:675] Check failed: PyBfloat16_Type.tp_base != nullp ...

  4. css拓展

    自定义居中 .second-listleft{/*固定位置*/ position: relative; float: left; width: 25%; height: 100%; backgroun ...

  5. hdu 6562 Lovers (线段树)

    大意: 有$n$个数字串, 初始为空, 两种操作(1)把$[l,r]$范围的所有数字串首位添加数位$d$ (2)询问$[l,r]$区间和 假设添加的数为$L$, $L$位数为$H$, $L$翻转后乘上 ...

  6. Python之特征工程-3

    一.什么是特征工程?其实也是数据处理的一种方式,和前面的原始数据不一样的是,我们在原始数据的基础上面,通过提取有效特征,来预测目标值.而想要更好的去得出结果,包括前面使用的数据处理中数据特征提取,新增 ...

  7. 将netcore网站部署到docker容器中

    一.背景 最近一直在看docker的教程,基础知识看的差不多了.理论总要运用于实践,所以下面我们就来把最简单的一个netcore网站托管到docker容器中. 环境:1.docker for wind ...

  8. 学习到目前，自己封装的db类和pdo类

    DB封装类 <?php class DBDA { public $host = "localhost"; public $uid = "root"; pu ...

  9. oracle的LAST_DAY（）函数

    转自:https://blog.csdn.net/u012581453/article/details/53727936 LAST_DAY LAST_DAY函数返回指定日期对应月份的最后一天. 获取当 ...

  10. iOS动画:CAKeyframeAnimation

    网络中Core Animation类的继承关系图       属性简介 @interface CAKeyframeAnimation : CAPropertyAnimation /* 提供关键帧数据的 ...