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

举报
薛定喵君 发表于 2021/03/31 22:16:41 2021/03/31
【摘要】 最近公司项目中需要在uniapp接入金山文档预览服务,这里记录一下接入方法。需求是在移动端H5里可以进行团队协作,支持预览编辑office文件。下面介绍一下接入过程: 准备工作 后端接入 前端接入 演示效果 参考资料 准备工作金山文档在线预览编辑服务,是以 H5 网页的形式提供,支持全平台接入。在线服务完整的使用,需要对接方前端和服务端的参与。前端:根据文件格式(Word、Excel、PPT...

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

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

准备工作

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

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

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

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

演示效果

参考资料

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200