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

2021-04-01 22:32:16

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

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

准备工作

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

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

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

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

后端接入

这里后端有专人负责,所以不再赘述,有兴趣的可以参考官方文档的服务端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进行初始化从而实现预览功能,仅供参考。

演示效果

参考资料

本文链接:
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-ND 3.0 许可协议。可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。

扫描下方二维码阅读当前文章

浏览器、微信扫码
微信小程序

评 论:

好文推荐
极客之路公众号
三百人技术交流群
探讨前端、小程序正逆向、爬虫...
学习交流&商务合作
微信情报 更多 >
    每天进步一点点~