uniapp中App端使用web-office-sdk

ChoneyLove

于 2024-05-16 16:15:15 发布

阅读量326

点赞数 4

文章标签： uni-app 前端

本文链接：https://blog.csdn.net/weixin_43109722/article/details/138965184

版权

WebOffice 即在线文档预览编辑服务，可为接入方提供专业的文档处理能力。支持文字、表格、演示和 PDF 四大主流文档类型。支持多人协作编辑，内容实时同步。跳转至官方文档

一、sdk引入

<script charset="utf-8" src="js/web-office-sdk-solution-v2.0.4.umd.js"></script>

二、html页面实现

由于在app端没有window浏览器对象，所以得需要使用webview组件内嵌html来实现。
目录结果如下：
web-office.html文件目录
web-office.html代码：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>文档在线预览</title>
</head>
<body>
	<div></div>
</body>
<script charset="utf-8" src="js/web-office-sdk-solution-v2.0.4.umd.js"></script>
<script type="text/javascript">
	window.onload = function() {
		let query = getQuery('data')
		if(!query) {
			alert('参数不存在')
			return
		}
		query = JSON.parse(query)
		let wps = WebOfficeSDK.init({
			appId: '此处填写 WebOfficeSDK appId',
			officeType: query.type,
			fileId: query.file_id,
			token: query.token,
			customArgs:{
				handel_type: query.handel_type
			}
		})
		wps.ApiEvent.AddApiEventListener("fileOpen", (data) => {
			if (!data.success) {
				alert('文件打开失败');
			}
		});
		
		function getQuery(name) {
			let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
			let r = window.location.search.substr(1).match(reg);
			if(r != null) {
				// 对参数值进行解码
				return decodeURIComponent(r[2]);
			}
			return null;
		}
	}
</script>
</html>

三、unipp vue页面

<web-view :src="src"></web-view>

async wpsInit(){
	const token = await tokenInvalidReturnInfo(3)
	let data = {
		file_id: this.params.fileId,
		type: this.params.type,
		handel_type: this.params.handelType,
		token: token
	}
	this.src = '/hybrid/html/web-office.html?data='+encodeURIComponent(JSON.stringify(data))
}