Tutoriel : Utilisez Vue et HTMLDocx pour générer rapidement des styles et des mises en page de documents Word personnalisables-Voir.js-php.cn

Tutoriel : Utilisez Vue et HTMLDocx pour générer rapidement des styles et des mises en page de documents Word personnalisables

Introduction :
Dans le travail et les études quotidiens, nous avons souvent besoin de générer des documents dans différents formats, parmi lesquels les documents Word sont les plus courants. Ce didacticiel expliquera comment utiliser Vue et la bibliothèque HTMLDocx pour générer rapidement des styles et des mises en page de documents Word personnalisables. Grâce à ce didacticiel, vous apprendrez à utiliser une combinaison de HTML et Vue pour créer des documents Word riches et diversifiés.

1. Préparation

Créer un projet Vue
Tout d'abord, nous devons créer un projet Vue. Ouvrez le terminal, entrez le dossier dans lequel vous souhaitez créer le projet, puis exécutez la commande suivante :
```
vue create word-docx-generator
```
Copier après la connexion
Sélectionnez la configuration requise en fonction des invites et attendez que le projet soit créé.
Installer la bibliothèque HTMLDocx
Exécutez la commande suivante dans le dossier du projet pour installer la bibliothèque HTMLDocx :
```
npm install htmldocx
```
Copier après la connexion
De cette façon, nous pouvons utiliser la bibliothèque HTMLDocx dans le projet pour générer des documents Word.

2. Écrivez du code

Créez un composant Vue
Créez un fichier nommé WordGenerator.vue dans le répertoire src du projet et écrivez le code suivant dans le fichier :

<template>
  <div>
 <button @click="generateDocx">生成Word文档</button>
  </div>
</template>

<script>
import {saveAs} from 'file-saver';
import htmlDocx from 'htmldocx';

export default {
  methods: {
 generateDocx() {
   const docxContent = `
     <html>
       <head>
         <style>
           body {
             font-family: Arial, sans-serif;
           }
           h1 {
             color: red;
           }
           p {
             font-size: 12px;
           }
         </style>
       </head>
       <body>
         <h1>这是一个标题</h1>
         <p>这是一段文本。</p>
       </body>
     </html>
   `;
   
   const convertedDocx = htmlDocx.asBlob(docxContent);
   saveAs(convertedDocx, 'generated.docx');
 }
  }
}
</script>

Copier après la connexion

Ajoutez du routage et des composants. Introduction
Recherchez le fichier index.js dans le dossier router du répertoire src du projet, ajoutez le code suivant :

import WordGenerator from '@/WordGenerator.vue';

const routes = [
  {
 path: '/',
 name: 'WordGenerator',
 component: WordGenerator
  }
];

export default new VueRouter({
  mode: 'history',
  routes
});

Copier après la connexion

Modifiez App.vue
Recherchez le fichier App.vue dans le répertoire src du projet et remplacez son contenu par Le code suivant :
```
<template>
  <div id="app">
 <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
```
Copier après la connexion

3. Exécutez le projet

Exécutez la commande suivante dans le terminal pour démarrer le projet :

npm run serve

Copier après la connexion

Visitez ensuite http://localhost:8080 dans le navigateur, vous verrez un bouton. Après avoir cliqué sur le bouton, un document Word nommé généré.docx sera automatiquement généré.

4. Personnaliser le style et la mise en page

Dans l'exemple ci-dessus, nous utilisons la balise