前端实现预览ppt，word，xls，pdf文件

一、前端实现pdf文件在线预览功能javascript

ps:恰好工做上有这个需求，因此处处找了一下处理方案，你们有须要能够试一下这几种方案，找到合适本身的

方式一、html

pdf文件理论上能够在浏览器直接打开预览可是须要打开新页面。在仅仅是预览pdf文件且UI要求不高的状况下能够直接经过a标签href属性实现预览前端

<a href="文档地址"></a>

ps:这个会直接变成下载，注意使用java

方式二、jquery

经过jquery插件jquery.media.js实现
这个插件能够实现pdf预览功能（包括其余各类媒体文件）可是对word等类型的文件无能为力。
实现方式：
js代码：git

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.media.js"></script>

下载地址：
jquery.media官方网址：http://malsup.com/jquery/media/
jquery.media GitHub地址：https://github.com/malsup/media/tree/master
jquery.media.rar（解压密码：crowsong.xyz）: http://waternote.ctfile.net/fs/2276132-372976040github

html结构：浏览器

<body>
    <div id="handout_wrap_inner"></div>
</body>

调用方式：微信

$('#handout_wrap_inner').media({
    width: '100%',
    height: '100%',
    autoplay: true,
    src:'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf'}); 
</script>

方式3、
引入app

<script src="http://jhyt.oss-cn-shanghai.aliyuncs.com/images/1531367199089_PDFObject.js"></script>

html结构

<div id="example1"></div>

经过js动态添加须要浏览的pdf地址

var options = {
    height: "550px",
    pdfOpenParams: {view: 'FitV', page: '0' },
    name:"mans",
    fallbackLink: "<p>您的浏览器暂不支持此pdf，请下载最新的浏览器</p>"
};
PDFObject.embed(url文档地址, "#example1",options);

ps:理论上用来预览pdf文件，不具有处理word，xls，ppt等文件
二、word、xls、ppt文件在线预览功能

2-一、
word、ppt、xls文件实如今线预览的方式比较简单能够直接经过调用微软的在线预览功能实现 (预览前提：资源必须是公共可访问的)

<iframe 
src='https://view.officeapps.live.com/op/view.aspxsrc=http://storage.xuetangx.com/public_assets/xuetangx/PDF/1.xls' width='100%' height='100%' frameborder='1'> 
</iframe>

使用方式：https://view.officeapps.live.com/op/view.aspx?src=文档地址
ps：适用pc端预览，这种方式在移动端不会自动适配，移动端会显示的很怪异。

2-二、

<iframe
    :src="'//ow365.cn/?i=18679&ssl=1&furl='+fileUrl"
    width="100%"
    height="100%"
    frameborder="0">
</iframe>

使用方式：//ow365.cn/?i=18679&ssl=1&furl=文档地址
ps：适用PC，移动端使用，可是有水印，可是不影响使用

2-三、

<iframe :src="'//www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc='+fileUrl" width="100%" height="100%" frameborder="0">
</iframe>

使用方式：//www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=文档地址
ps：适用PC，移动端使用，不能处理比较老的word文件，好比.doc后缀的文件，可是显示很清晰，惋惜会有个很大的微信二维码，暂时没想到办法怎么去掉，能去掉的的话，麻烦也告诉我一下，谢谢

原文出处：https://www.cnblogs.com/zwp06/p/10944095.html