在线编辑、预览、基于wps web office，v3版 强势来袭（已适配solon）

说明

1. v1 版本已经不再更新了，官方也只是提供以前申请下来的账号能继续使用，新申请，需要用到v3了
2. v3 版本sdk参考 wps-weboffice-sdk-v3, 里面有很详细的注释
3. v3 集成方法，后端请参考wps-weboffice-v3-demo, 实现你需要对接的接口即可
4. 使用v3的大前提是，你申请了开发账号，并且申请下来了appid，–web-office官网–

其实v3版本已经是小半年了，但是呢，实在看不下去官方的那个sdk，所以，自己就接着弄吧，虽然也没有多少工作量，主要是让用的人能快速接入~~~

基于官方最新sdk-v3 ------------ V3开发文档官网

基于官方的sdk,做了大量优化,增加了最为详细的注释,并推送到maven,方便大家使用

---

sdk地址 https://gitee.com/mose-x/wps-weboffice-sdk-v3

---

引入maven

  cn.ljserver.tool  web-office-v3  3.1.1

基于此sdk的实现,也给你demo以及简单的html页面

---

demo地址 https://gitee.com/mose-x/wps-weboffice-v3

---

号外

web office 已经适配 国产框架 solon，想体验的去试试，或者试试这个solon demo，相关说明

---

sdk地址 https://gitee.com/mose-x/wps-weboffice-sdk-v3-solon

---

引入maven

  cn.ljserver.tool  web-office-v3-solon-plugin  1.0.0

基于此sdk的实现,也给你demo以及简单的html页面

---

demo地址 https://gitee.com/mose-x/wps-weboffice-v3-solon-demo

---

– 接着说 –

---

效果呢,和v1版本的大差不差,只是接入方式完全变化了

使用sdk接入,反倒更加简单了,需要接入的,多看看demo里面的注释,以及sdk的注释

比如文件预览，引入maven后，你只需实现PreviewService 里面的接口即可

/** * 文件预览服务必要的接口实现 * 
 * -详见官方文档- */@Servicepublic class PreviewServiceImpl implements PreviewService {    @Autowired    private UserService userService;    @Autowired    private FileService fileService;    /**     * 获取文件信息     *     * @param fileId 文件id 
     *               -详见官方文档-     */    @Override    public FileInfo fetchFileInfo(String fileId) {        // 解释说明下，这里在实际的设计中，需要将 文件信息 表 和历史文件版本表分开放        // 这里是通过文件id，获取到当前文件最新一个版本的文件信息，并返回        // 这里为了方便，所以设计成了一张表        return fileService.fetchFile(fileId).toFileInfo();    }    /**     * 获取文件下载地址     *     * @param fileId 文件id 
     *               -详见官方文档-     */    @Override    public DownloadInfo fetchDownloadInfo(String fileId) {        // 解释说明下，这里在实际的设计中，需要将 文件信息 表 和历史文件版本表分开放        // 然后这里就会获取最后一个版本的文件并返回        // 这里为了方便，所以设计成了一张表        return Optional.ofNullable(fileId)                .map(fileService::findById)                .map(Collection::stream)                .flatMap(s -> s.max(Comparator.comparingInt(f -> f.getId().getVersion())))                .map(f -> DownloadInfo.builder()                        .url(f.getUrl())                        .build())                .orElseThrow(FileNotExist::new);    }    /**     * 获取用户文件权限     *     * @param fileId 文件id 
     *               -详见官方文档-     */    @Override    public UserPermission fetchUserPermission(String fileId) {        // 解释说明下，这里在实际的设计中，需要将 文件信息 表 和 用户权限 表 分开放        // 这里为了方便，并没有设计表，返回了所有权限到前端        // check file exists        fileService.fetchFile(fileId);        // 获取user信息，这个方法点进去看看把！！！        User user = userService.fetchUserByToken();        // 构建user对应的文件权限        return UserPermission.builder()                .userId(String.valueOf(user.getId()))                .read(true)                .update(true)                .rename(true)                .download(true)                .copy(true)                .comment(true)                .history(true)                .build();    }}

文档编辑，单阶段保存，嗯，很简单，如下

/** * 单阶段文件保存接口 * 
 * 详见wps web office官网 */@Servicepublic class SinglePhaseFileStorageServiceImpl implements SinglePhaseFileStorageService {    @Autowired    private UserService userService;    @Autowired    private FileService fileService;    /**     * 上传文件     *     * @param request 上传文件请求     * @return 文件信息     * 
     * 详见wps web office官网     */    @Override    public FileInfo uploadFile(FileUploadSinglePhase.Request request) {        // 获取用户信息 -> 这个方法点进去看看 ？？！！        final User user = userService.fetchUserByToken();        // 保存文件信息        final File file = Optional.of(request)                .map(r -> fileService.fetchFile(request.getFileId()))                .map(f -> File.builder()                        .id(f.getId().copyForNewVersion())                        .creator(f.getCreator())                        .createTime(f.getCreateTime())                        .modifyTime(LocalDateTime.now())                        .modifier(user)                        .name(request.getName())                        .size(request.getSize())                        // 上传文件获取到URL                        // --------------------------------                        // 这里不应该直接保存URL，而是不带domain的uri方便后续迁移等等                        // 为了方便，就这么弄了                        // --------------------------------                        .url(QnFileService.upload(request.getFile()))                        .build())                .map(f -> fileService.repository().save(f))                .orElseThrow(FileNotExist::new);        // 返回文件信息        return file.toFileInfo();    }}

---

这里说明下，单阶段保存，和三阶段保存

1. 单阶段，即直接保存，没有那么多花里胡哨的
2. 三阶段保存
   • 先获取自定义的加密算法
   • 获取到自定义的文件上传接口，同时将文件元信息给到你
   • 当wps后台上传完文件后（通过步骤2上传），再调用你的上传完成接口，作为回调，告诉你上传完成的信息

---

---

---

此次先给到java的sdk，java-demo以及最简单的html页面来让大家快速对接，如果确实有需要的话，后续我再把官网前端那些对接的，弄个vue的项目，供大家参考，反正闲着也是闲着。。。

---

嗯，别忘了给v3项目小星星哦！

---

V3实际效果

和v1效果差不多，只是v3目前有自带的水印

---

docx 在线预览/编辑

---

pptx 在线预览/编辑

---

xlsx 在线预览/编辑

---

pdf 在线预览/编辑

---

---

---

---