Create Excel File In Vue JS

Introduction:

Excel is frequently used for financial analysis and data organization. Businesses of all sizes and in all business operations use it.

This article explains how to use VueJS to produce an excel sheet from JSON data. We begin from scratch by installing VueJS in order to read the spreadsheet file.

Prerequisites:

Make sure npm is installed on your machine before beginning this step. To locate and set up the necessary dependencies for our application, we’ll utilize npm. Code editors are also necessary. Visual Studio Code is used throughout the whole course.

Get Started:

Step 1:

Configure your system with Vue CLI. The new package may be installed using the instructions shown below. To launch them, you must have administrator privileges unless npm was set up on your machine using Node.js version management (e.g. n or nvm).

npm install -g @vue/cli

Your command line will have access to the Vue binary after installation. Run Vue to verify that it was installed properly. A help message detailing all the possible commands should then appear.

You may check that you are running the right version with this command:

vue --version

Step 2:

Create a new project by running this command.

vue create generate-excel

Step 3:

Install XLSX package using this command.

npm i xlsx

Step 4:

Import XLSX into your HelloWorld.vue file.

import * as XLSX from "xlsx";

Step 5:

Add the generate button in your HTML.

<button v-on:click="generateExcelFile()">Generate Excel</button>

Step 6:

Add the sample data object.

sampleData: [
        {
          id: 1,
          name: "test1"
        },
        {
          id: 2,
          name: "test2"
        },
        {
          id: 3,
          name: "test3"
        },
]

Step 7:

Add the generateExcelFile() in method section.

generateExcelFile() {
      const ws = XLSX.utils.json_to_sheet(this.sampleData);  
      const wb = XLSX.utils.book_new();  
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');  
      XLSX.writeFile(wb, 'sample.xlsx');  
}

Finally, run the project by

npm run serve