Comment créer des rapports Excel via une interaction front-end et back-end

L'équipe de la communauté open source chinoise a réalisé sa première diffusion en direct, racontant l'histoire de la communauté open source chinoise au nom du partage.

Préface

Excel a le public le plus large dans le domaine bureautique et est devenu un outil irremplaçable grâce à ses puissantes fonctions de traitement et de visualisation des données. Il peut non seulement présenter les données clairement, mais également effectuer des opérations telles que l'analyse des données, la production de graphiques et le pivotement des données, offrant aux utilisateurs des capacités complètes d'affichage et d'analyse des données.

Aujourd'hui, l'éditeur vous présentera comment implémenter un modèle de rapport Excel et saisir et remplir des données via le contrôle de table frontal pur SpreadJS de Grape City Company et le composant de table back-end GcExcel.

Préparation environnementale

Noeud.js

Éditeur de formulaires en ligne SpreadJS

Fichier de code (peut être utilisé comme référence pour lire cet article)

l'extrémité avant

Concevoir un modèle de rapport Excel

1. Chargez la source de données pour créer des rapports :

Ouvrez l'éditeur de tableau en ligne SpreadJS . Avant de concevoir le rapport groupé, vous devez effectuer un travail de préparation des données. Cliquez sur le bouton [Source de données] dans l'onglet [Données] de la barre d'outils du tableau pour lui ajouter une source de données.

Utilisez le bouton [Ajouter une table] pour ajouter chaque objet source de données (chaque objet source de données correspond à une table) et configurer le chemin pour lire les données (le chemin peut être une adresse qui demande le format de source de données correspondant, ou il peut être un serveur L'adresse demandée, le serveur renvoie un objet source de données conforme au format).

Le chemin des données est un champ facultatif. Si json contient plusieurs sources de données, vous pouvez les distinguer en définissant le chemin des données.

2. Ajoutez un modèle de rapport :

Après avoir ajouté la source de données, cliquez sur le bouton de rapport de l'onglet [Insérer] pour insérer un nouveau modèle de rapport. L'objet de source de données précédemment ajouté sera affiché dans la liste des sources de données sur la gauche, comme le montre la figure ci-dessous.

3. Configurez des rapports groupés :

En faisant glisser les champs dans la liste des sources de données sur la gauche, vous pouvez créer rapidement un modèle de rapport qui regroupe les champs de zone de vente, de province, de ville et de type de produit pour comptabiliser les ventes et les bénéfices, comme le montre la figure ci-dessous :

4. Enregistrez le modèle Excel en tant que fichier sjs

Modifier le modèle de rapport Excel

Après avoir enregistré le modèle de rapport Excel en tant que fichier .sjs, l'éditeur doit maintenant convertir certaines cellules du modèle de rapport Excel en langage de modèle GcExcel. Les opérations spécifiques sont les suivantes :

Placez le fichier .sjs dans le répertoire racine du code frontal SpreadJS

5. Convertir le modèle Excel en syntaxe de modèle GcExcel

En prenant comme exemple la cellule C4 (province) du modèle de rapport Excel (comme indiqué dans la figure ci-dessous), l'éditeur obtient d'abord les informations de l'API du modèle (les informations de file d'attente dans DevTools dans la figure ci-dessous) via la méthode getBindingPath.

Après avoir obtenu les informations de l'API, analysez son chemin de liaison :

//此为部分代码，完整代码在文末的Gitee链接中
let binding = template.getBindingPath(r, c)  // binding内容如上图
// ... 
// 绑定路径
let path = ""
switch (binding && binding.type) {
    case "Group":
    case "List":
        if (binding.binding) {
            let p = binding.binding.match(/(?<=\[)[^\]\[]*(?=\])/g).join(".")
            path += ds + "." + p // path="销售数据.省份"
        }
        break;
    // ...
}

Analysez ensuite son type de fusion et sa direction d'expansion :

// Group类型
let group = ""
if (binding && binding.type == "Group") {
    group = "G=M"
} else if (binding && binding.type == "List") {
    group = "G=L"
}
// Expand方向
let expand = ""
if (binding && binding.type != "Summary" && binding.spillDirection == "Vertical") {
   expand = "E=V"
} else if (binding && binding.type != "Summary" && binding.spillDirection == "Horizontal") {
   expand = "E=H"
}

Enfin, après avoir intégré ces informations et ajouté des doubles accolades, le contenu de la cellule C4 du fichier Excel exporté doit être la syntaxe du modèle GcExcel suivante :

{{ds.销售数据.省份(E=V,G=M)}}

6. Exécutez le projet frontal et exportez le fichier modèle Excel

Entrez la commande [npm install] pour télécharger les dépendances
Entrez la commande [npm run start] pour démarrer le projet (comme indiqué dans la figure ci-dessous après le démarrage)

Enfin, exportez le modèle modifié vers un fichier Excel, comme indiqué dans la figure ci-dessous. Vous pouvez voir que les informations dans l'unité de province ont été modifiées selon la syntaxe du modèle GcExcel.

extrémité arrière

Ouvrez le code back-end GcExcel et placez le fichier modèle Excel précédemment exporté dans le répertoire racine du fichier de code. La dernière fonction principale exécutée peut transférer les données dans le fichier modèle Excel, et enfin un rapport Excel avec les données sera généré.

Conclusion

Ce qui précède décrit l'ensemble du processus d'utilisation de SpreadJS+GcExcel pour créer un rapport Excel. Si vous souhaitez en savoir plus, veuillez cliquer ici pour le voir.

Lien d'extension :

[Diffusion d'informations sèches] Lisez tous les points clés de l'analyse des états financiers dans un seul article !

Pourquoi vos états financiers ne sont-ils pas excellents ? Il est recommandé de comprendre ces quatre points de conception et !

Analyse de scénarios d'application de contrôle de table Excel purement frontal dans le domaine de l'analyse de rapports

Comment créer des rapports Excel via une interaction front-end et back-end

Je suppose que tu aimes