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

薛定喵君

关注

发布于: 2021 年 04 月 01 日

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

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

#准备工作

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

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

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

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

#后端接入

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

#uni-app 前端接入

js-sdk下载

使用之前，请先下载最新版本的 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 进行初始化从而实现预览功能，仅供参考。

#演示效果

#参考资料

发布于: 2021 年 04 月 01 日阅读数: 84

原文链接:【http://xie.infoq.cn/article/c824a7fc12d63555e73bc15f1】。文章转载请联系作者。

薛定喵君

关注

公号极客之路号主 2018.09.29 加入

独立博客博主(xuedingmiao.com)，GitChat 作者，mp-unpack 工具作者。

发布

暂无评论

创作场景

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

#准备工作

#后端接入

#uni-app 前端接入

#演示效果

#参考资料

薛定喵君

评论