最近公司项目中需要在uniapp接入金山文档预览服务，这里记录一下接入方法
需求是在移动端H5里可以进行团队协作，支持预览编辑office文件。
下面介绍一下接入过程：
# 准备工作
金山文档在线预览编辑服务，是以 H5 网页的形式提供，支持全平台接入。
在线服务完整的使用，需要对接方前端和服务端的参与。
前端：根据文件格式（Word、Excel、PPT 等）生成访问金山文档的 url，通过 js-sdk 接入，调用相关 API 来实现相关需求。
服务端：根据金山文档在线预览编辑服务提供的回调 API 实现接口，将数据存储到对接方的公网服务器中。
可以通过 4 个步骤，快速接入金山文档在线预览编辑服务。
- 接入方式
# 后端接入
这里后端有专人负责，所以不再赘述，有兴趣的可以参考官方文档的服务端Demo (opens new window)
# uni-app前端接入
- js-sdk下载 (opens new window)
使用之前，请先下载最新版本的 js-sdk 代码。 - 引用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进行初始化从而实现预览功能，仅供参考。
