前端實現預覽ppt，word，xls，pdf文件

時間 2019-12-09

標籤前端實現預覽 ppt word xls pdf 文件欄目 Microsoft Office 简体版

原文原文鏈接

一、前端實現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後綴的文件，可是顯示很清晰，惋惜會有個很大的微信二維碼，暫時沒想到辦法怎麼去掉，能去掉的的話，麻煩也告訴我一下，謝謝