Projet Backend Spring Boot

Pour commencer, ajoutez la dépendance PageOffice dans votre fichier pom.xml. Le fichier pageoffice.jar est disponible sur le dépôt central Maven. Il est recommandé d'utiliser la dernière version.

<dependency>
  <groupId>com.zhuozhengsoft</groupId>
  <artifactId>pageoffice</artifactId>
  <version>6.4.1.2-javax</version>
</dependency>

Ensuite, dans votre classe d'application principale (annotée avec @SpringBootApplication), configurez un @Bean pour le serveur PageOffice. Cette configuration est requise côté serveur.

@Value("${posyspath}")
private String cheminSystemePO;

@Bean
public ServletRegistrationBean<?> beanEnregistrementPageOffice() {
    com.zhuozhengsoft.pageoffice.poserver.Server serveurPO = new com.zhuozhengsoft.pageoffice.poserver.Server();
    serveurPO.setSysPath(cheminSystemePO);
    ServletRegistrationBean<?> srb = new ServletRegistrationBean<>(serveurPO);
    srb.addUrlMappings("/poserver.zz");
    srb.addUrlMappings("/poclient");
    srb.addUrlMappings("/sealsetup.exe");
    return srb;
}

Créez ensuite un contrôleur pour gérer l'ouverture et l'enregistrement des fichiers via PageOffice. Voici un exemple de FichierController :

@RestController
@RequestMapping("/fichier")
public class FichierController {
    // Chemin physique du répertoire contenant les documents, par exemple pour un serveur Linux : /root/documents/
    private final String cheminRepertoire = "/root/documents/";

    @GetMapping("/ouvrir")
    public String ouvrirDocument(HttpServletRequest requete, @RequestParam String nom_fichier) {
        PageOfficeCtrl ctrlPO = new PageOfficeCtrl(requete);
        ctrlPO.webOpen("file://" + cheminRepertoire + nom_fichier, OpenModeType.docNormalEdit, "Utilisateur");
        return ctrlPO.getHtml();
    }

    @PostMapping("/enregistrer")
    public void enregistrerDocument(HttpServletRequest requete, HttpServletResponse reponse, @RequestParam String nom_fichier) {
        FileSaver fs = new FileSaver(requete, reponse);
        fs.saveToFile(cheminRepertoire + nom_fichier);
        fs.close();
    }
}

Projet Frontend Vue

Installez la bibliothèque JavaScript js-pageoffice via NPM. Assurez-vous que sa version correspond à celle du JAR PageOffice côté backend (les trois premiers numéros).

npm install js-pageoffice@6.4.1 --save-exact

Configurez globalement PageOffice dans l'intrecepteur des requêtes HTTP (par exemple, dans votre instance Axios).

import axios from 'axios';
import { POBrowser } from 'js-pageoffice';

const instanceAxios = axios.create({
    baseURL: '/api-base',
    timeout: 10000,
});

instanceAxios.interceptors.request.use(
    (config) => {
        // Exemple d'ajout d'un token d'authentification
        const jetonAuth = 'votre_jeton_ici';
        if (jetonAuth) {
            config.headers['Authorization'] = `Porteur ${jetonAuth}`;
        }

        // Configuration requise pour le proxy PageOffice
        POBrowser.setProxyBaseAPI('/api-base');
        // Transmission des en-têtes (ex: authentification) au serveur PageOffice
        POBrowser.setHeader('Authorization', `Porteur ${jetonAuth}`);
        // Si le jeton est stocké localement (localStorage/sessionStorage)
        // POBrowser.setStorage("Cle-Auth", getJeton());

        return config;
    },
    (erreur) => {
        return Promise.reject(erreur);
    }
);
export default instanceAxios;

Créez une composante Vue, par exemple src/vues/VueDocument.vue, qui hébergera l'éditeur PageOffice.

<script setup>
import { ref, onMounted } from 'vue';
import http from '@/services/http';

const codeHtmlPO = ref('');
const parametresRequete = ref({});

// Fonction d'initialisation appelée par PageOffice
function surInitialisationPO() {
    // Ajout d'un bouton personnalisé
    pageofficectrl.AddCustomToolButton("Enregistrer", "procedureEnregistrement", 1);
}

// Procédure déclenchée par le bouton "Enregistrer"
function procedureEnregistrement() {
    let urlSauvegarde = '/fichier/enregistrer';
    let parametres = new URLSearchParams(parametresRequete.value);
    pageofficectrl.SaveFilePage = `${urlSauvegarde}?${parametres.toString()}`;
    pageofficectrl.WebSave();
}

// Callback après l'ouverture du document
function apresOuvertureDocument() {
    console.log('Le document a été ouvert avec succès.');
}

async function chargerDocument() {
    const reponse = await http.get('/fichier/ouvrir', { params: parametresRequete.value });
    codeHtmlPO.value = reponse.data;
}

onMounted(() => {
    // Récupération des paramètres envoyés depuis la fenêtre parent
    if (window.pageofficectrl?.WindowParams) {
        parametresRequete.value = JSON.parse(window.pageofficectrl.WindowParams);
    }

    // Chargement initial du document
    chargerDocument();

    // Liaison des fonctions aux événements PageOffice
    window.POPageMounted = {
        surInitialisationPO,
        apresOuvertureDocument,
        procedureEnregistrement,
    };
});
</script>

<template>
    <div class="conteneur-document">
        <h4>Aperçu du Document</h4>
        <div v-html="codeHtmlPO" style="width: 100%; height: 800px;"></div>
    </div>
</template>

Pour accéder à cette vue, définissez une route, par exemple /document. Depuis une autre page (vue parent), vous pouvez ouvrir ce document dans une fenêtre PageOffice dédiée.

<a href="#" @click.prevent="ouvrirFichierAvecPO()">Ouvrir le document</a>

<script setup>
import { POBrowser } from 'js-pageoffice';

const donneesDocument = {
    id: 42,
    nom: 'rapport.pdf'
};

function ouvrirFichierAvecPO() {
    POBrowser.openWindow('/document', 'width=1200px;height=900px;', JSON.stringify(donneesDocument));
}
</script>