1. Project Overview

Based on WPS online editing and preview services, with a decoupled Spring Boot + Vue/React frontend and backend architecture.

2. Open Source License

Licensed under Apache-2.0

3. Screenshots

4. Feature Overview

Based on WPS online editing and preview services, supporting wps, doc, docx, xls, xlsx, ppt, pptx, and pdf.

Updates on January 23

Added support for MinIO object storage. Thanks to zhuoran for submitting the PR.

Updates on November 24

Integrated the official WPS document conversion API and combined it with the VUE frontend project to implement file conversion.

Adjusted code styling.

Added an official Alibaba document conversion method for users of Alibaba OSS.

Updates on June 28

Upgraded oss-sdk (important: failure to upgrade may cause OSS upload errors).

Modified the method for retrieving file sizes during online document previews.

Updates on May 7

Added Qiniu file storage, which can be switched via the configuration file.

Refactored parts of the project structure.

Updates on March 10

Added a template creation API for frontend calls to quickly create new files.

Renamed the rename field to re_name in the w_user_acl_t permission table to avoid conflicts with MySQL reserved keywords.

Meets all your OSS needs. OSSUtil in util includes all commonly used OSS methods, all of which have been tested and verified.

Added file management APIs for uploading, deleting, and other operations.

5. Tech Stack

Database Schema

Environment Preparation

Prerequisites

• Apply for the WPS online editing service and obtain the appid and appsecret.
• Set the WPS callback URL, such as http://123.34.56.78:8080 (this port number must match the port configured in the Java project).
• Apply for Alibaba OSS and obtain the access_key, access_secret, and other related parameters (please integrate other cloud storage services yourself).
• If you do not want to use OSS, or prefer other cloud services and file hosting services, you can disable the relevant code in the version update API, refactor it, or leave it as is (an exception will only occur when saving a version). First, get the entire project running end to end.
• Install the Lombok plugin in your Java IDE. See the Lombok installation guide for details.

Service

• Initialize MySQL by executing the wpsinit.sql file under resources (you can customize the database, file URLs, and avatar URLs; please fill these in yourself).
• Configure the MySQL, WPS, and OSS-related parameters in application.properties under resources.
• Deploy the packaged application to the callback server (pay attention to the port number).
• For other related APIs, please refer to the WPS Open Platform documentation.

Design

• See mind_map.png and database_schema.png under the resources directory for details.

The parameters in the configuration file can be used as a reference.

The code structure can be adjusted as needed.

Easter Egg

In the ApplicationTests class file, there is a method for converting OSS URLs into online preview URLs, as well as a document conversion method. However, these services are paid. Please check the associated fees yourself.

wps-view-java

A backend service for WPS online editing and online preview, developed using Spring Boot.

wps-view-vue

A frontend Vue project for WPS online editing and online preview, based on ES6.

This project is implemented using VUE + ES6. The jwps.es6.js file is specially provided by the WPS development team, with some modifications made to the original JavaScript file for this project.

wps-view-react

A frontend React project for WPS online editing and online preview. It shares the same backend with the previous Java project and can also replace the previous Vue frontend project. This React project is recommended.

This project is implemented using React + ES6 + ant-design. The jwps.es.js file is specially provided by the WPS development team, with some modifications made to its source code for this project.

1. react-roter-dom 5.x
2. react-dom
3. ant
4. react-hot-loader
5. axios
6. react-scripts

Backend Java source code repository

• Visit one flying open source: https://code.exmay.com/

Frontend source code repository

• Vue: Visit Yifei Open Source: [https://code.exmay.com/](https://code.exmay.com/)
• React: Visit Yifei Open Source: [https://code.exmay.com/](https://code.exmay.com/)