comment créer un éditeur Excel collaboratif avec GridJs
Guide de l’éditeur Excel collaboratif
Aperçu de l’architecture
Le diagramme suivant montre comment GridJs permet la modification collaborative avec plusieurs utilisateurs, un backend Spring Boot, une communication WebSocket, et une base de données MySQL pour la gestion de l’état.
Prérequis
Avant de commencer, assurez-vous que vous avez installé ce qui suit :
- Java 8+
- Maven
- MySQL (ou une autre base de données SQL compatible)
- (Optionnel) Docker si vous préférez utiliser des conteneurs
- Une licence Aspose.Cells valide (ou licence temporaire)
Step 1: Clone the Demo Project
Clone the official Aspose.Cells GridJs demo repository:
git clone https://github.com/aspose-cells/Aspose.Cells.Grid-for-Java.git
cd Aspose.Cells-for-Java/Examples.GridJs.Collaborative
Step 2: Configure Collaborative Mode
Open the src/main/resources/application.properties file and adjust the settings:
# Directory containing spreadsheet files
testconfig.ListDir=/app/wb
# Directory for storing cache files
testconfig.CachePath=/app/grid_cache
# Aspose.Cells license file
testconfig.AsposeLicensePath=/app/license
# Enable collaborative mode
gridjs.iscollabrative=true
# Database connection (example: MySQL)
spring.datasource.url=jdbc:mysql://localhost:3306/gridjsdemodb?createDatabaseIfNotExist=true&useUnicode=true&serverTimezone=UTC&useSSL=false
spring.datasource.username=root
spring.datasource.password=root
spring.sql.init.platform=mysql
Cela permet à plusieurs utilisateurs de modifier en même temps la même feuille de calcul.
Les modifications sont stockées dans la base de données et synchronisées en temps réel entre les clients.
Step 3: Run the Application
Run with Maven:
mvn spring-boot:run
Ou directement depuis la classe principale :
src/main/java/com/aspose/gridjsdemo/usermanagement/UserManagementApplication.java
Step 4: Test Collaborative Editing
Open your browser and navigate to:
👉 http://localhost:8080/gridjsdemo/list
Steps:
- A login page appears. Click Create User to register User1 and log in. You will then see the file list.
- Open a file from the list. The spreadsheet editor will load.
- Copy the same URL into another browser window. It will redirect to the login page. Create User2 and log in.
- Both users now see the same spreadsheet.
- If User1 edits the spreadsheet, User2 will see the changes in real time.
- If User2 edits, User1 will see the changes as well.
- Users can also download and save the file.
Étape 5 : Exécuter dans Docker (Optionnel)
Si vous exécutez dans Docker, modifiez la ligne 10 de docker-compose.yml pour faire correspondre le fichier de licence.
Par exemple, si votre fichier de licence se trouve à C:/license/aspose.lic :
volumes:
- C:/license/aspose.lic:/app/license # optional: set Aspose license file
Cela mappe le fichier local dans le conteneur.
Ensuite, compilez et exécutez :
docker-compose up --build
Accédez à l’application à :
👉 http://localhost:8080/gridjsdemo/list
Key Configuration Details
1. Enable Collaborative Mode
In /src/main/resources/application.properties:
gridjs.iscollabrative=true
Dans la configuration côté serveur /src/main/java/com/aspose/gridjsdemo/filemanagement/FileConfig.java :
@Bean
public GridJsOptions gridJsOptions() {
//..... other options
//here we shall set true for collaborative mode
options.setCollaborative(true);
return options;
}
Ou globalement :
Config.setCollaborative(true);
Dans les options de chargement côté client /src/main/resources/templates/file/index.html :
const option = {
//..... other options
//here we shall set true for collaborative mode
isCollaborative: true
//..... other options
};
2. User System Integration
The demo uses Spring Security for a simple user system.
You must provide a CoWorkUserProvider implementation to connect GridJs with your user system:
In server-side config /src/main/java/com/aspose/gridjsdemo/filemanagement/FileConfig.java:
For example: here we defined MyCustomUser to implement all the interfaces in CoWorkUserProvider.
@Bean
public CoWorkUserProvider currentUserProvider() {
return new MyCustomUser();
}
Dans /src/main/java/com/aspose/gridjsdemo/filemanagement/MyCustomUser.java :
public class MyCustomUser implements CoWorkUserProvider {
//Get the current login user name
@Override
public String getCurrentUserName() {
return getCurrentUser().getUsername();
}
//Get the current login user Id
@Override
public Long getCurrentUserId() {
return getCurrentUser().getUserId();
}
//Get the current login user permission
@Override
public CoWorkUserPermission getPermission() {
return CoWorkUserPermission.EDITABLE;
}
private static CustomUserDetails getCurrentUser() {
Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
if (authentication != null && authentication.getPrincipal() instanceof CustomUserDetails) {
return (CustomUserDetails) authentication.getPrincipal();
}
throw new IllegalStateException("User not authenticated");
}
}
3. WebSocket Configuration
The demo uses Spring WebSocket with STOMP.
Example config:
In /src/main/java/com/aspose/gridjsdemo/messages/WebSocketConfig.java:
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
config.enableSimpleBroker("/topic");
config.setApplicationDestinationPrefixes("/app");
config.setUserDestinationPrefix("/user");
}
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/ws")
.setAllowedOrigins("http://localhost:8080")
.withSockJS();
}
}
GridJs s’attend à ce que messageTopic corresponde à “/topic/opr” qui est par défaut :
com.aspose.gridjs.Config.setMessageTopic("/topic/opr");
Ou :
@Bean
public GridJsOptions gridJsOptions() {
//.... other options
options.setMessageTopic("/topic/opr");
//.... other options
return options;
}
Côté client :
xs.setCollaborativeSetting('/GridJs2/msg','/ws','/app/opr','/user/queue','/topic/opr');
Ici, /GridJs2/msg correspond au chemin de la route défini dans
src/main/java/com/aspose/gridjsdemo/filemanagement/controller/GridJsOprController.java :
@RequestMapping("/GridJs2/msg")
Exemple avec des chemins WebSocket personnalisés
Si votre serveur utilise une configuration différente :
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
config.enableSimpleBroker("/topic_gridjs");
config.setApplicationDestinationPrefixes("/app_gridjs");
config.setUserDestinationPrefix("/user_gridjs");
}
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/ws_gridjs")
.setAllowedOrigins("http://localhost:8080")
.withSockJS();
}
}
Alors, vous devez définir :
Côté serveur :
com.aspose.gridjs.Config.setMessageTopic("/topic_gridjs/opr");
ou
@Bean
public GridJsOptions gridJsOptions() {
//.... other option
options.setMessageTopic("/topic_gridjs/opr");
//.... other option
return options;
}
Côté client :
xs.setCollaborativeSetting('/GridJs2/msg','/ws_gridjs','/app_gridjs/opr','/user_gridjs/queue','/topic_gridjs/opr');
le document de détails pour setCollaborativeSetting peut être trouvé ici
⚠️ Note : Par défaut, la configuration de la démo fonctionne prête à l’emploi.
Une configuration supplémentaire n’est requise que si votre application personnalise les points de terminaison WebSocket.
N’oubliez pas : le mode collaboratif ne supporte pas le chargement paresseux.
Ne pas activer Config.setLazyLoading(true).
Additional Notes
- We can add file uploads to load and edit spreadsheet file from upload directory.
- Integrate with cloud storage like AWS S3 or Azure Blob.
Conclusion
Avec Aspose.Cells.GridJs, vous pouvez rapidement construire un éditeur Excel collaboratif puissant.
La combinaison du backend Java, du frontend GridJs, du stockage SQL et de la messagerie WebSocket garantit une édition de feuille de calcul en temps réel fiable.