Office文件在线预览是目前在线办公必不可少的一项需求，一般情况都是需要后端去完成的。那么我作为前端工程师的我们如何解决这一问题呢？
第一步，获取准备预览地址
- 此处使用的usdoc的在线预览模式，使用方法以及开发文档可以参考
http://usdoc.cn/show 前置预览地址： http://
这个地址src后面紧跟文件地址
例如：http://vw.usdoc.cn/?src=文件地址 注意：此处的文件地址必须为网络文件地址。
如： http://vw.usdoc.cn/?w=5&src=https://vw.usdoc.cn/三好学生申请书.wps =注意=
src后面的文件地址建议编码一下，如果路径中含有中文在某些浏览器可能会无法获取单文件解析。
代码如下：
<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://vw.usdoc.cn/taobao/%E4%B8%89%E5%A5%BD%E5%AD%A6%E7%94%9F%E7%94%B3%E8%AF%B7%E4%B9%A6.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
