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

前端实现Office在线预览 (一)_第1张图片
这样就是实现了WPS文件在线预览的效果,更多预览效果可以参考usdoc的其他模式。
这里有开发文档 http://usdoc.cn/show

你可能感兴趣的:(html,css,html5,wps)