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

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

需求是在移动端H5里可以进行团队协作，支持预览编辑office文件。

下面介绍一下接入过程：

准备工作

后端接入

前端接入

演示效果

参考资料

准备工作

金山文档在线预览编辑服务，是以 H5 网页的形式提供，支持全平台接入。

在线服务完整的使用，需要对接方前端和服务端的参与。

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

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

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

申请服务商

接入方式

文件预览

文件编辑

文件新建

服务端接入

前端接入

后端接入

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

前端接入

js-sdk下载

使用之前，请先下载最新版本的 js-sdk 代码。

引用js-sdk

将js-sdk拷贝至uni-app项目内

uniapp项目中新建预览页例如preview.vue，输入如下代码。

如上所示，调用wps的内置config函数并传入参数

setToken 主动设置 toke 来进行初始化及鉴权设置

另外需要在App.vue中加入如下全局样式，防止高度没撑起来达不到预览效果

uni-page-body { height: 100%; } #viewFile { height: 100%; } #viewFile .web-office-iframe { height: 100% !important; }

说明：

本示例是在点击文件时获取预览地址将地址存入localStorage(当然你也可以使用query传参的方式)之后在预览页取出后调用sdk进行初始化从而实现预览功能，仅供参考。

演示效果

参考资料

接入指南

js-sdk

服务端 demo 获取

js-sdk引用方式

wps-view-vue

视频演示

API/SDK web前端

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。