Office在线预览

Office文件在线预览是目前在线办公必不可少的一项需求，一般情况都是需要后端去完成的。那么我作为前端工程师的我们如何解决这一问题呢？

第一步，获取准备预览地址
此处使用的usdoc的在线预览模式，使用方法以及开发文档可以参考
http://usdoc.cn/show
前置预览地址： http://vw.usdoc.cn/?src=
这个地址src后面紧跟文件地址
如： http://vw.usdoc.cn/?w=5&src=https://zh.usdoc.cn/view/三好学生申请书.wps
=注意=

src后面的文件地址建议编码一下，如果路径中含有中文在某些浏览器可能会无法获取单文件解析。

代码如下：

<!DOCTYPE html>
<html lang="zh">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title></title>
     <style type="text/css">
         #app>input {
             width: 300px;
             height: 30px;
             border-radius: 3px;
             border-style: none;
             border: 1px solid #bababa;
         }
         #app>button {
             padding: 10px 30px;
             border: 1px solid #bababa;
             background-color: #FFF;
             border-radius: 3px;
         }
         iframe {
             border-style: none;
             border: 1px solid #d8d8d8;
         }
     </style>
 </head>
 <body>
     <div id="app">
         <span>文件地址：</span>
         <input name="fileSrc" type="text" />
         <button id="view">预览</button>
     </div>
     <iframe src=""
         width="800" height="650">
     </iframe>
 </body>
</html>
<script src="js/jquery-2.2.0.min.js"></script>
<script type="text/javascript">
 var preSrc = "http://vw.usdoc.cn/?w=5&src=";
 /**
  *点击开始预览
  */
 //http://vw.usdoc.cn/?w=5&src=https://zh.usdoc.cn/view/三好学生申请书.wps
 $("#view").click(() => {
     let url = $("input[name='fileSrc']").val();
     if (url.trim()=="") {
         //没有获取到文件地址
     }
     //文件地址url解码一次，防止中文出错
     url = decodeURIComponent(url);
     $($("iframe")[0]).attr("src",preSrc url)
 })
</script>

这样就是实现了WPS文件在线预览的效果，更多预览效果可以参考usdoc的其他模式。
可以参考开发文档： http://usdoc.cn/show