wie man einen kollaborativen Excel Editor mit GridJs erstellt

Leitfaden zum kollaborativen Excel-Editor

Architekturübersicht

Das folgende Diagramm zeigt, wie GridJs kollaboratives Bearbeiten mit mehreren Nutzern ermöglicht, einen Spring Boot-Backend, WebSocket-Kommunikation und eine MySQL-Datenbank für die Statusverwaltung.

GridJs Kollaborative Architektur

Voraussetzungen

Stellen Sie vor dem Start sicher, dass Sie Folgendes installiert haben:

Java 8+
Maven
MySQL (oder eine andere unterstützte SQL-Datenbank)
(Optional) Docker, wenn Sie es bevorzugen, in Containern zu laufen
Eine gültige Aspose.Cells-Lizenz (oder vorübergehende Lizenz)

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

Dies ermöglicht mehreren Benutzern, gleichzeitig dieselbe Tabelle zu bearbeiten.
Änderungen werden in der Datenbank gespeichert und in Echtzeit zwischen den Clients synchronisiert.

Step 3: Run the Application

Run with Maven:

mvn spring-boot:run

Oder direkt von der Hauptklasse aus:

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.

Schritt 5: In Docker ausführen (Optional)

Wenn Sie in Docker ausführen, bearbeiten Sie Zeile 10 von docker-compose.yml, um die Lizenzdatei zuzuordnen.

Zum Beispiel, wenn Ihre Lizenzdatei bei C:/license/aspose.lic liegt:

volumes:
  - C:/license/aspose.lic:/app/license  # optional: set Aspose license file

Dies ordnet die lokale Datei dem Container zu.

Dann bauen und starten Sie:

docker-compose up --build

Greifen Sie auf die App zu unter:
👉 http://localhost:8080/gridjsdemo/list

Key Configuration Details

1. Enable Collaborative Mode

In /src/main/resources/application.properties:

gridjs.iscollabrative=true

Im serverseitigen Konfigurationsfile /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;
}

Oder global:

Config.setCollaborative(true);

In den Client-seitigen Ladeoptionen /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();
}

In /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 erwartet, dass messageTopic mit “/topic/opr” übereinstimmt, was der Standard ist:

com.aspose.gridjs.Config.setMessageTopic("/topic/opr");

Oder:

@Bean
    public GridJsOptions gridJsOptions() {
	//.... other options
    	options.setMessageTopic("/topic/opr");
    	//.... other options
        return options;
    }

Auf der Client-Seite:

xs.setCollaborativeSetting('/GridJs2/msg','/ws','/app/opr','/user/queue','/topic/opr');

Hier entspricht /GridJs2/msg dem Routename, der in
src/main/java/com/aspose/gridjsdemo/filemanagement/controller/GridJsOprController.java:

@RequestMapping("/GridJs2/msg")

Beispiel mit angepassten WebSocket-Pfaden

Wenn Ihr Server eine andere Konfiguration verwendet:

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();
    }
}

Dann müssen Sie setzen:

Serverseitig:

com.aspose.gridjs.Config.setMessageTopic("/topic_gridjs/opr");

oder

    @Bean
    public GridJsOptions gridJsOptions() {
	//.... other option
    	options.setMessageTopic("/topic_gridjs/opr");
    	//.... other option
        return options;
    }

Clientseitig:

xs.setCollaborativeSetting('/GridJs2/msg','/ws_gridjs','/app_gridjs/opr','/user_gridjs/queue','/topic_gridjs/opr');

Das Detaildokument für setCollaborativeSetting finden Sie hier

⚠️ Hinweis: Standardmäßig funktioniert die Demo-Konfiguration sofort.
Zusätzliche Konfiguration ist nur erforderlich, wenn Ihre App WebSocket-Endpunkte anpasst.

Denken Sie auch daran: Der kollaborative Modus unterstützt kein Lazy Loading.
Aktivieren Sie nicht 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.

Fazit

Mit Aspose.Cells.GridJs können Sie schnell einen leistungsstarken kollaborativen Excel-Editor erstellen.
Die Kombination aus Java-Backend, GridJs-Frontend, SQL-Speicherung und WebSocket-Kommunikation sorgt für eine zuverlässige Echtzeit-Tabellenerstellung.

Resources

wie man Menüs und Symbolleisten in GridJs anpasst