思路：前台将各种格式的附件上传到服务器----后台通过方法将这些格式的文件转化成图片，前台通过放映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. 乐字节Java继承|方法重写、super和final关键字

    大家好,乐字节的小乐又来了,上一篇是:乐字节Java|JavaBean.继承与权限修饰,也是属于Java继承的,今天继续Java继承. 一. 方法的重写 父类不满足子类的要求,按需改写.注意 方法签名 ...

  2. LeetCode 429. N叉树的层序遍历(N-ary Tree Level Order Traversal)

    429. N叉树的层序遍历 429. N-ary Tree Level Order Traversal LeetCode429. N-ary Tree Level Order Traversal 题目 ...

  3. Hbuilder环境下配置php

    XAMPP的安装 https://blog.csdn.net/qing666888/article/details/81914389 安装并配置好Xampp后,在Hbuilder中下载php插件,工具 ...

  4. hdu 2132... 被基本问题考住了。。

    Problem Description We once did a lot of recursional problem . I think some of them is easy for you ...

  5. C#数字日期转成中文日期

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...

  6. 你不知道的JSON.stringify知识点

    1. 定义 stringify 函数的定义: JSON.stringify(value [, replacer [, space]]) 参数: value : 将要转为JSON字符串的javascri ...

  7. k8s 开源web操作平台

    https://kuboard.cn/install/install-dashboard.html kuborad

  8. rabbitmd

    一.前期准备   (1)条件:准备3台linux系统,确保能连到download.yunwei.edu   (2)编写yum源下载脚本: vim yum-repo.sh wget -O /etc/yu ...

  9. 今日前端框架Vue学习笔记

    在线网页网址http://xingxunxinxi.com/StudentCourse/first.html代码 界面

  10. UI5-技术篇-Navigation And Routing

    主要记录下Router设置过程中出现的几个问题 1.View 首页设置 controlId 2.Manifest设置 2.1设置启动页 2.2设置默认配置 2.3设置Targets 首页设置 子页设置 ...