uniapp接入金山文档在线预览服务

最近公司项目中需要在uniapp接入金山文档预览服务，这里记录一下接入方法。

需求是在移动端H5里可以进行团队协作，支持预览编辑office文件。
下面介绍一下接入过程：

准备工作

金山文档在线预览编辑服务，是以 H5 网页的形式提供，支持全平台接入。
在线服务完整的使用，需要对接方前端和服务端的参与。

前端：根据文件格式（Word、Excel、PPT 等）生成访问金山文档的 url，通过 js-sdk 接入，调用相关 API 来实现相关需求。

服务端：根据金山文档在线预览编辑服务提供的回调 API 实现接口，将数据存储到对接方的公网服务器中。

可以通过 4 个步骤，快速接入金山文档在线预览编辑服务。

• 1. 申请服务商
• 2. 接入方式
  • 文件预览
  • 文件编辑
  • 文件新建
• 3. 服务端接入
• 4. 前端接入

后端接入

这里后端有专人负责，所以不再赘述，有兴趣的可以参考官方文档的服务端Demo

前端接入

1. js-sdk下载
   使用之前，请先下载最新版本的 js-sdk 代码。
2. 引用js-sdk
   将js-sdk拷贝至uni-app项目内
   uniapp项目中新建预览页例如preview.vue，输入如下代码。

<template>
	<view id="viewFile"></view>
</template>

<script>
	import * as WPS from 'common/js/web-office-sdk-v1.1.9.es.js'
	import config from '@/common/js/config.js'
	export default {
		data() {
			return {
				wps: {},
				token: '', 
				wpsUrl: '', // 在线文档预览地址
				simpleMode: false
			}
		},
		onLoad() {
			this.wps = WPS;
			this.token = uni.getStorageSync(config.Global.cache + '_Token');
			this.wpsUrl = uni.getStorageSync(config.Global.cache + '_WPS_URL');
		},
		mounted() {
			this.openWps(this.wpsUrl, this.token);
		},
		methods: {
			openWps(url, token) {
				let _this = this;
				const wps = _this.wps.config({
					mode: _this.simpleMode ? 'simple' : 'normal',
					mount: document.querySelector('#viewFile'),
					wpsUrl: url,
				});
				wps.setToken({
					token
				});
				let app = wps.Application;
			}
		}
	}
</script>

<style lang="scss">
</style>

如上所示，调用wps的内置config函数并传入参数
setToken 主动设置 toke 来进行初始化及鉴权设置

另外需要在App.vue中加入如下全局样式，防止高度没撑起来达不到预览效果

uni-page-body {
    height: 100%;
}
#viewFile {
    height: 100%;
}
#viewFile .web-office-iframe {
    height: 100% !important;
}

说明：
本示例是在点击文件时获取预览地址将地址存入localStorage(当然你也可以使用query传参的方式)之后在预览页取出后调用sdk进行初始化从而实现预览功能，仅供参考。

演示效果

参考资料

• 接入指南
• js-sdk
• 服务端 demo 获取
• js-sdk引用方式
• wps-view-vue
• 视频演示