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

PrinciplesMan

已于 2022-05-18 13:51:43 修改

阅读量7.8k

点赞数

分类专栏： # Web 文章标签： html5 html javascript

于 2021-08-26 14:21:06 首次发布

原文链接：https://www.cnblogs.com/DZzzz/p/11405846.html

版权

Web 专栏收录该内容

77 篇文章 1 订阅

订阅专栏

亲测可用，若有疑问请私信

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

示例 - I Doc View在线文档预览 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&_format=html&_cache=1&_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插件

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.docx、ppt、xls、pdf文件转html_装逼犯中的码农的博客-CSDN博客_docx、ppt、xls、pdf文件转html docx、ppt、xls、pdf文件转html 注：这篇文章是给我们后台看的

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

PrinciplesMan

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
前端实现在线预览pdf、docx、xls、ppt等文件

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

扫一扫