思路：前台将各种格式的附件上传到服务器----后台通过方法将这些格式的文件转化成图片，前台通过放映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. php有关类和对象的相关知识2

    与类有关的魔术常量: __CLASS__,:获取其所在的类的类名. __METHOD__:获取其所在的方法的方法名. class A{ function f1(){ echo __CLASS__: / ...

  2. 兔子问题（Rabbit problem）

    Description 有一种兔子,出生后一个月就可以长大,然后再过一个月一对长大的兔子就可以生育一对小兔子且以后每个月都能生育一对.现在,我们有一对刚出生的这种兔子,那么,n 个月过后,我们会有多少 ...

  3. python glob删除目录下的文件

    使用glob匹配目录下的文件 import os import glob path="./" for infile in glob.glob(os.path.join(path,& ...

  4. LeetCode 617. 合并二叉树(Merge Two Binary Trees)

    617. 合并二叉树 617. Merge Two Binary Trees 题目描述 给定两个二叉树,想象当你将它们中的一个覆盖到另一个上时,两个二叉树的一些节点便会重叠. 你需要将他们合并为一个新 ...

  5. ajax后台跳转无效的原因

    Ajax只是利用脚本访问对应url获取数据而已,不能做除了获取返回数据以外的其它动作了.所以浏览器端是不会发起重定向的. 1)正常的http url请求,只有浏览器和服务器两个参与者.浏览器端发起一个 ...

  6. python 之 网络编程（基于UDP协议的套接字通信）

    8.5 基于UDP协议的套接字通信 UDP协议:数据报协议 特点:无连接,一发对应一收,先启动哪一端都不会报错 优点:发送效率高,但有效传输的数据量最多为500bytes 缺点:不可靠:发送数据,无需 ...

  7. WUSTOJ 1299: 结点选择（Java）

    题目链接:

  8. create-react-app中的一些功能配置

    1. 根路径别名@ 1. npm run eject调出配置文件.找到webpack.config.js,搜索到,alias,在下面添加一行键值对'@':paths.appSrc, alias: { ...

  9. Effective Java 读书笔记（四）：泛型

    1 不要使用原始类型 (1)术语 术语 例子 参数化类型(Parameterized type) List<String> 实际类型参数(Actual type parameter) St ...

  10. 关闭ShowDialog的模态窗口

    [DllImport("user32.dll")] private static extern IntPtr FindWindow(string a, string b); [Dl ...