前端实现Office在线预览 (一)

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

第一步，获取准备预览地址

1. 此处使用的usdoc的在线预览模式，使用方法以及开发文档可以参考
   http://usdoc.cn/show
   前置预览地址： http://vw.usdoc.cn?src=
   这个地址src后面紧跟文件地址
   例如：http:///vw.usdoc.cn/?src=文件地址
   注意：此处的文件地址必须为网络文件地址。
   如： http://vw.usdoc.cn/?m=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/?m=5&src="; 
	/**
	 *点击开始预览 
	 */
	//http:///vw.usdoc.cn/?m=5&src=https://zh.usdoc.cn/view/%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