Utiliser Vue pour créer un complément du volet de tâches Excel

  • Article

Cet article décrit le processus de création d’un complément de volet de tâches Excel à l’aide de Vue et de l’API JavaScript pour Excel.

Conditions préalables

  • Node.js (la dernière version LTS) Visitez le siteNode.js pour télécharger et installer la version appropriée pour votre système d’exploitation.

  • La dernière version deYeoman et du Générateur Yeoman Générateur de compléments Office. Pour installer ces outils globalement, exécutez la commande suivante via l’invite de commande.

    npm install -g yo generator-office

    Remarque

    Même si vous avez précédemment installé le générateur Yeoman, nous vous recommandons de mettre à jour votre package vers la dernière version de npm.

  • Office connecté à un abonnement Microsoft 365 (y compris Office on the web).

    Remarque

    Si vous n’avez pas encore Office, vous pouvez bénéficier d’un abonnement Microsoft 365 E5 développeur par le biais du Programme pour les développeurs Microsoft 365. Pour plus d’informations, consultez le FAQ. Vous pouvez également vous inscrire à un essai gratuit de 1 mois ou acheter un plan Microsoft 365.

Génération d’une nouvelle application Vue

Pour générer une nouvelle application Vue, utilisez l’interface de ligne de commande Vue.

vue create my-add-in

Ensuite, sélectionnez la Default prédéfinie pour « Vue 3 » (si vous préférez, choisissez « Vue 2 »).

Génération du fichier manifeste

Chaque complément nécessite un fichier manifeste pour définir ses paramètres et ses fonctionnalités.

  1. Accédez au dossier de votre application.

    cd my-add-in

  2. Utilisez le générateur Yeoman pour générer le fichier manifeste de votre complément.

    yo office

    Remarque

    Lorsque vous exécutez la commande yo office, il est possible que vous receviez des messages d’invite sur les règles de collecte de données de Yeoman et les outils CLI de complément Office. Utilisez les informations fournies pour répondre aux invites en fonction des besoins. Si vous sélectionnez Quitter en réponse à la deuxième invite, vous devez réexécuter la commande yo office lorsque vous êtes prêt à créer votre projet de complément.

    Lorsque vous y êtes invité, fournissez les informations suivantes pour créer votre projet de complément.

    • Choisissez un type de projet :Office Add-in project containing the manifest only
    • Que voulez-vous nommer votre complément ?My Office Add-in
    • Quelle application cliente Office souhaitez-vous prendre en charge ?Excel

    L'interface de ligne de commande de Yeoman Generator pour les compléments Office, avec le type de projet défini comme manifeste uniquement

Une fois l’exécution terminée, l’Assistant crée un dossierMon complément Office contenant un fichier manifest.xml. Vous utiliserez le manifeste pour charger une version test et tester votre complément à la fin du Démarrage rapide.

Conseil

Vous pouvez ignorer les instructions suivantes fournies par le générateur Yeoman une fois que le complément a été créé. Les instructions détaillées de cet article fournissent tous les conseils nécessaires à l’exécution de ce didacticiel.

Sécurisation de l’application

Bien qu’elle ne soit pas obligatoire dans tous les scénarios de complément, l’utilisation d’un point de terminaison HTTPS pour votre complément est fortement recommandée. Les compléments qui ne sont pas sécurisés par SSL (HTTPS) génèrent des erreurs et avertissements qui signalent un contenu non sécurisé durant l’utilisation. Si vous envisagez d’exécuter votre complément dans Office sur le Web ou de publier votre complément sur AppSource, il doit être sécurisé par SSL. Si votre complément accède aux services et données externes, il doit être sécurisé par SSL pour protéger les données en transit. Les certificats auto-signés peuvent être utilisés pour le développement et les tests, tant que le certificat est approuvé sur l’ordinateur local.

  1. Activez HTTPS pour votre application. Dans le dossier racine du projet Vue, créez un fichier vue.config.js avec le contenu suivant.

    const fs = require("fs");
const path = require("path");
const homedir = require('os').homedir()

module.exports = {
  devServer: {
    port: 3000,
    https: {
      key: fs.readFileSync(path.resolve(`${homedir}/.office-addin-dev-certs/localhost.key`)),
      cert: fs.readFileSync(path.resolve(`${homedir}/.office-addin-dev-certs/localhost.crt`)),
      ca: fs.readFileSync(path.resolve(`${homedir}/.office-addin-dev-certs/ca.crt`)),
     }
   }
}

  2. Installez les certificats du complément.

    npx office-addin-dev-certs install

Explorer le projet

Le projet de complément que vous avez créé avec le générateur Yeoman contient un exemple de code pour un complément de volet Office de base. Pour explorer les composants clés de votre projet de complément, ouvrez le projet dans votre éditeur de code et passez en revue les fichiers répertoriés ci-dessous. Lorsque vous êtes prêt à tester votre complément, passez à la section suivante.

  • Le fichier manifest.xml du répertoire racine du projet définit les paramètres et fonctionnalités du complément. Pour en savoir plus sur le fichier manifest.xml, consultez manifeste XML des compléments Office.
  • Le fichier ./src/App.vue contient le balisage HTML du volet Office, le CSS appliqué au contenu du volet Office et le code de l’API JavaScript Office qui facilite l’interaction entre le volet Office et Excel.

Mettre à jour l’application

  1. Ouvrez le fichier ./public/index.html et ajoutez la balise <script> suivante juste avant la balise </head>.

    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>

  2. Ouvrez manifest.xml et recherchez les <bt:Urls> étiquettes à l’intérieur de la <balise Resources> . Recherchez la balise <bt:Url> avec l’ID Taskpane.Url et mettez à jour son attribut DefaultValue. La nouvelle DefaultValue est https://localhost:3000/index.html. La balise mise à jour entière doit correspondre à la ligne suivante.

    <bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/index.html" />

  3. Ouvrez ./src/main.js et remplacez le contenu par le code suivant.

    import { createApp } from 'vue'
import App from './App.vue'

window.Office.onReady(() => {
    createApp(App).mount('#app');
});

  4. Ouvrez ./src/App.vue et remplacez le contenu du fichier par le code suivant.

    <template>
  <div id="app">
    <div class="content">
      <div class="content-header">
        <div class="padding">
          <h1>Welcome</h1>
        </div>
      </div>
      <div class="content-main">
        <div class="padding">
          <p>
            Choose the button below to set the color of the selected range to
            green.
          </p>
          <br />
          <h3>Try it out</h3>
          <button @click="onSetColor">Set color</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'App',
    methods: {
      onSetColor() {
        window.Excel.run(async context => {
          const range = context.workbook.getSelectedRange();
          range.format.fill.color = 'green';
          await context.sync();
        });
      }
    }
  };
</script>

<style>
  .content-header {
    background: #2a8dd4;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    overflow: hidden;
  }

  .content-main {
    background: #fff;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
  }

  .padding {
    padding: 15px;
  }
</style>

Démarrage du serveur de développement

  1. Démarrage du serveur de développement.

    npm run serve

  2. Dans un navigateur web, accédez à https://localhost:3000 (remarquez le https). Si la page sur https://localhost:3000 est vide et qu’aucune erreur de certificat ne s’affiche, cela signifie qu’elle fonctionne. L’application Vue est montée une fois qu’Office est initialisé, de sorte qu’elle affiche uniquement les éléments dans un environnement Excel.

Essayez

  1. Exécutez votre complément et chargez-le de manière indépendante dans Excel. Suivez les instructions pour la plateforme que vous utiliserez :

  2. Ouvrez le volet Office du complément dans Excel. Dans l’onglet Accueil, choisissez le bouton Afficher le volet de tâches.

    Menu Accueil d’ Excel, avec le bouton Afficher le volet Office mis en évidence

  3. Sélectionnez une plage de cellules dans la feuille de calcul.

  4. Définissez la couleur de la plage sélectionnée sur vert. Dans le volet Office de votre complément, choisissez le bouton Définir la couleur .

    Le volet Office du complément s’ouvre dans Excel.

Étapes suivantes

Félicitations, vous avez créé un complément de volet de tâches Excel à l’aide de Vue ! Ensuite, découvrez les fonctionnalités d’un complément Excel et créez-en un plus complexe en suivant le didacticiel sur les compléments Excel.

Didacticiel sur les compléments Excel

Résolution des problèmes

Voir aussi