Hướng dẫn excel vuejs

Skip to main content

This browser is no longer supported.

Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.

Use Vue to build an Excel task pane add-in

• Article
• 09/13/2022
• 5 minutes to read

In this article

In this article, you'll walk through the process of building an Excel task pane add-in using Vue and the Excel JavaScript API.

Prerequisites

• Node.js (the latest LTS version).

• The latest version of Yeoman and the Yeoman generator for Office Add-ins. To install these tools globally, run the following command via the command prompt.

  npm install -g yo generator-office
  

  Note

  Even if you've previously installed the Yeoman generator, we recommend you update your package to the latest version from npm.

• Install the Vue CLI globally. From the terminal, run the following command.

  npm install -g @vue/cli
  

Generate a new Vue app

To generate a new Vue app, use the Vue CLI.

vue create my-add-in

Then, select the Default preset for "Vue 3" (if you prefer, choose "Vue 2").

Generate the manifest file

Each add-in requires a manifest file to define its settings and capabilities.

1. Navigate to your app folder.

   cd my-add-in
   

2. Use the Yeoman generator to generate the manifest file for your add-in.

   yo office
   

   Note

   When you run the yo office command, you may receive prompts about the data collection policies of Yeoman and the Office Add-in CLI tools. Use the information that's provided to respond to the prompts as appropriate. If you choose Exit in response to the second prompt, you'll need to run the yo office command again when you're ready to create your add-in project.

   When prompted, provide the following information to create your add-in project.

   • Choose a project type: Office Add-in project containing the manifest only
   • What do you want to name your add-in? My Office Add-in
   • Which Office client application would you like to support? Excel

After completion, the wizard creates a My Office Add-in folder containing a manifest.xml file. You'll use the manifest to sideload and test your add-in.

Tip

You can ignore the next steps guidance that the Yeoman generator provides after the add-in project's been created. The step-by-step instructions within this article provide all of the guidance you'll need to complete this tutorial.

Secure the app

While not strictly required in all add-in scenarios, using an HTTPS endpoint for your add-in is strongly recommended. Add-ins that are not SSL-secured (HTTPS) generate unsecure content warnings and errors during use. If you plan to run your add-in in Office on the web or publish your add-in to AppSource, it must be SSL-secured. If your add-in accesses external data and services, it should be SSL-secured to protect data in transit. Self-signed certificates can be used for development and testing, so long as the certificate is trusted on the local machine.

1. Enable HTTPS for your app. In the root folder of the Vue project, create a vue.config.js file with the following contents.

   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. Install the add-in's certificates.

   npx office-addin-dev-certs install
   

Explore the project

The add-in project that you've created with the Yeoman generator contains sample code for a basic task pane add-in. If you'd like to explore the key components of your add-in project, open the project in your code editor and review the files listed below. When you're ready to try out your add-in, proceed to the next section.

• The manifest.xml file in the root directory of the project defines the settings and capabilities of the add-in. To learn more about the manifest.xml file, see Office Add-ins XML manifest.
• The ./src/App.vue file contains the HTML markup for the task pane, the CSS that's applied to the content in the task pane, and the Office JavaScript API code that facilitates interaction between the task pane and Excel.

Update the app

1. Open the ./public/index.html file and add the following

2. Open manifest.xml and find the tags inside the tag. Locate the tag with the ID Taskpane.Url and update its DefaultValue attribute. The new DefaultValue is https://localhost:3000/index.html. The entire updated tag should match the following line.

3. Open ./src/main.js and replace the contents with the following code.

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

4. Open ./src/App.vue and replace the file contents with the following code.

Start the dev server

1. Start the dev server.

   npm run serve
   

2. In a web browser, navigate to https://localhost:3000 (notice the https). If the page on https://localhost:3000 is blank and without any certificate errors, it means that it's working. The Vue App is mounted after Office is initialized, so it only shows things inside of an Excel environment.

Try it out

1. Run your add-in and sideload the add-in within Excel. Follow the instructions for the platform you'll be using:

   • Windows: Sideload Office Add-ins on Windows
   • Web browser: Sideload Office Add-ins to Office on the web
   • iPad: Sideload Office Add-ins on iPad
   • Mac: Sideload Office Add-ins on Mac

2. Open the add-in task pane in Excel. On the Home tab, choose the Show Taskpane button.

3. Select any range of cells in the worksheet.

4. Set the color of the selected range to green. In your add-in's task pane, choose the Set color button.

   

Next steps

Congratulations, you've successfully created an Excel task pane add-in using Vue! Next, learn more about the capabilities of an Excel add-in and build a more complex add-in by following along with the Excel add-in tutorial.

See also

• Office Add-ins platform overview
• Develop Office Add-ins
• Excel JavaScript object model in Office Add-ins
• Excel add-in code samples
• Excel JavaScript API reference
• Using Visual Studio Code to publish