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

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

 

  • 准备工作

  • 后端接入

  • uni-app前端接入

  • 演示效果

  • 参考资料

 

准备工作

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

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

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

官方介绍了 4 个步骤，可以快速接入金山文档在线预览编辑服务。

  1. 申请服务商：

      https://open.wps.cn/apply-developer)  

    2. 接入方式  

  • 文件预览：

    https://wwo.wps.cn/docs/server/access-mode/file-preview

  • 文件编辑：

    https://wwo.wps.cn/docs/server/access-mode/file-editing/

  • 文件新建：

    https://wwo.wps.cn/docs/server/access-mode/new-file/

    3. 服务端接入：

https://wwo.wps.cn/docs/server/fast-access/

    4. 前端接入：

https://wwo.wps.cn/docs/front-end/introduction/quick-start

 

后端接入

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

 

uni-app前端接入

  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进行初始化从而实现预览功能，仅供参考。

 

演示效果

 

 

参考资料

  • 接入指南： https://wwo.wps.cn/docs/

  • js-sdk：https://wwo.wps.cn/docs/update-log/jssdk/jssdk-update-log

  • 服务端 demo 获取：https://wwo.wps.cn/docs/server/fast-access/demo/

  • js-sdk引用方式：https://wwo.wps.cn/docs/front-end/introduction/quote

  • wps-view-vue：https://gitee.com/mose-x/wps-view-vue

 

uni-app对接金山文档在线预览服务_uni-app

一张思维导图帮你记忆 flex 弹性布局


uni-app对接金山文档在线预览服务_uni-app_02

vue项目：基于网页授权的微信扫码登录Demo


uni-app对接金山文档在线预览服务_uni-app_03

程序员学习新技术的10个建议


uni-app对接金山文档在线预览服务_uni-app_04

只要30行代码带你使用腾讯云TCB云函数抓取微信产品情报信息