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

时间：2024-01-24 17:31:02

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

ps:刚好工作上有这个需求，所以到处找了一下处理方案，大家有需要可以试一下这几种方案，找到合适自己的

方式一、

pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面。在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览

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

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


方式二、

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

<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-372976040

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>

 

方式三、
引入

<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等文件
2、word、xls、ppt文件在线预览功能

2-1、
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-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-3、

<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后缀的文件，但是显示很清晰，可惜会有个很大的微信二维码，暂时没想到办法怎么去掉，能去掉的的话，麻烦也告诉我一下，谢谢

相关文章