前端实现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

  • 14
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值