思路：前台将各种格式的附件上传到服务器----后台通过方法将这些格式的文件转化成图片，前台通过放映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. STAR软件的学习

    下载地址与参考文档 https://github.com/alexdobin/STAR/archive/2.5.3a.tar.gz wget https://github.com/alexdobin/ ...

  2. Quartz.Net—基本操作

    Quratz基本架构 Scheduler基本操作 /// <summary> /// 调度器信息 /// </summary> /// <returns></ ...

  3. golang之文件结尾错误（EOF）

    函数经常会返回多种错误,这对终端用户来说可能会很有趣,但对程序而言,这使得情况变得复杂.很多时候,程序必须根据错误类型,作出不同的响应.让我们考虑这样一个例子:从文件中读取n个字节.如果n等于文件的长 ...

  4. nodejs的安装与npm的介绍

    Node.js是一个Javascript运行环境(runtime environment),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装.本文详细介绍了No ...

  5. HCIA SWITCHING&ROUTTING 笔记——第一章 TCP/IP基础知识（3）

    4 ICMP协议 4.1 概念 ICMP即 Internet Contorl Message Protocol,即Internet控制消息协议,是网络层的一个重要协议.ICMP协议用来在网络设备间传递 ...

  6. WUSTOJ 1338: The minimum square sum（Java）

    题目链接:1338: The minimum square sum Description Given a prime p(p<108), you are to find min{x2+y2}, ...

  7. 最佳thread数量

    cpu 密集性task,过多的线程反而降低了处理效率,最佳的做法就是保持和cpu core数量大致相同的线程数量: threads = number of CPUs + 1 io密集型,因为会有cpu ...

  8. 怎样查看python的所有关键字

    关键字是python中具有特定功能的一组词汇, 这些词汇不能用作变量名, 一般会有高亮提示, code时请小心. python的关键字其实也是python的语法核心, 掌握了所有python关键字的用 ...

  9. 【SoloPi】SoloPi使用3-性能测试-启动时间测试

    响应耗时计算工具Soloπ响应耗时计算工具,通过录屏分帧的方式自动识别起始点和结束点,精确计算耗时. 特性模拟用户视觉,计算结果更贴近用户体验自动记录点击起始点,自动识别屏幕变化结束点通过OpenCV ...

  10. C#中using的用途

    using System;                                                    --主命名空间,包含所有.net基础类型和通用类型,比如Object, ...