How to Import and Export CSV Files using Vue

A Vue spreadsheet component, such as SpreadJS, brings Excel-like spreadsheet power to modern web applications. In many projects, developers want a simple way to import CSV files into a spreadsheet-like interface and export edited data back as CSV. While the official documentation shows the basics of getCsv() and setCsv(), this article demonstrates a complete Vue I/O CSV workflow from project setup to interactive import/export buttons. You’ll learn how to read a CSV file into SpreadJS, edit the data visually, and export the results as a new CSV file.

Download a trial of the Vue spreadsheet component, SpreadJS, here!

Steps to Add CSV Import/Export Abilities to Vue Apps

1. Create Your Vue Project for CSV Import/Export
2. Install SpreadJS Packages
3. Import SpreadJS in Your Vue App
4. Add the SpreadJS Component to the Template
5. Initialize the Spreadsheet
6. Implement CSV Import Logic
7. Implement CSV Export Logic
8. Run Your Application

Download a final sample application here to follow along.

Create Your Vue Project for CSV Import/Export

Before integrating SpreadJS to create a CSV Import/Export application, you need a base Vue project. Vue.js provides a modern, reactive framework that makes building web applications fast and efficient.

Use the Vue CLI to quickly scaffold a new project. Open your terminal and run:

npm create vue@latest

During the setup process, the CLI will prompt you to configure your project. Here’s what you can select based on your requirements:

After completing the prompts, Vue will scaffold the project structure in a folder with your chosen name.

Once the project is created, navigate to your project folder:

cd <your-project-name>
npm install

Open your browser at http://localhost:5173. You should see your Vue application running, ready for integrating SpreadJS to create your interactive Vue CSV Import/Export application.

For guidance on getting started with Vue, please refer to our SpreadJS documentation ‘SpreadJS with Vue’.

Install SpreadJS Packages

SpreadJS provides a set of NPM packages for Vue that make integration smooth. To get started you will need the following:

• @mescius/spread-sheets
• @mescius/spread-sheets-vue

Command:

npm install @mescius/spread-sheets @mescius/spread-sheets-vue

Import SpreadJS in Your Vue App

In this step, we set up SpreadJS in our Vue application by importing the necessary modules and styles into App.vue.

import "@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
import * as GC from "@mescius/spread-sheets";
import "@mescius/spread-sheets-vue";

Add the SpreadJS Component to the Template

The <gc-spread-sheets> component is the heart of your spreadsheet application, rendering a fully interactive Excel-like grid directly in your Vue app. The Import CSV button triggers a hidden file input to select CSV files, the Export CSV button converts the current spreadsheet into a CSV and downloads it, and the spreadsheet grid displays all the data in a fully editable format, allowing users to view, modify, and interact with the data seamlessly.

<template>
  <div>
    <div style="margin-bottom: 10px;">
      <input type="file" accept=".csv" ref="fileInput" style="display: none;" @change="handleFileImport" />
      <button @click="triggerImport">Import CSV</button>
      <button @click="exportCsv">Export CSV</button>
    </div>
    <gc-spread-sheets :hostClass="hostClass" @workbookInitialized="initWorkbook"></gc-spread-sheets>
  </div>
</template>

Initialize the Spreadsheet

Once the <gc-spread-sheets> component is loaded in your Vue app, you need to initialize the spreadsheet so it’s ready for user interaction. The @workbookInitialized event provides access to the SpreadJS workbook instance, allowing you to store it in a local variable and manipulate the active worksheet. In this step, we also set default values in the first few cells, so you can see that the spreadsheet is functional and interactive. This setup ensures that the grid is ready to import CSV data or export any changes made by you.

function initWorkbook(spreadInstance) {
  spread = spreadInstance;
  const sheet = spread.getActiveSheet();
  sheet.setValue(0, 0, "Hello SpreadJS + Vue!");
  sheet.setValue(1, 0, "Click 'Export CSV' to download this data.");
}

The image below shows the Vue CSV import/export spreadsheet running in the browser after setup.

Implement CSV Import Logic

To allow users to bring their CSV data into the spreadsheet, we implement a CSV import workflow. The Import CSV button triggers a hidden file input, letting users select a CSV file from their device. Once a file is chosen, the handleFileImport function reads its contents using a FileReader, clears any existing data in the spreadsheet, and then sets the CSV content into the active worksheet using SpreadJS’s setCsv method. This approach ensures the imported data appears correctly in the grid and allows users to start editing immediately.

function triggerImport() {
  document.querySelector('input[type="file"]').click();
}

function handleFileImport(event) {
  const file = event.target.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = function(e) {
    const csvData = e.target.result;
    const sheet = spread.getActiveSheet();
    // Clear old data
    sheet.clear(0, 0, sheet.getRowCount(), sheet.getColumnCount());
    // Import CSV data
    sheet.setCsv(0, 0, csvData, "\r\n", ",");
  };
  reader.readAsText(file);
  event.target.value = "";
}

The GIF below shows the CSV import feature in action within the Vue application. After selecting a CSV file from the system, the data is instantly loaded into the spreadsheet grid, confirming that the import logic is functioning correctly and that the Vue CSV import/export setup using SpreadJS is successfully reading and displaying CSV content.

Implement CSV Export Logic

To enable users to save their spreadsheet data as a CSV file, we implement the CSV export workflow. When the Export CSV button is clicked, the exportCsv function retrieves the data from the active worksheet using SpreadJS’s getCsv method. This data is then converted into a downloadable CSV file using a Blob object. Finally, a temporary link is created and triggered programmatically, prompting the user to download the CSV file. This approach allows users to easily export their current spreadsheet content while preserving the layout and values exactly as displayed in the grid.

function exportCsv() {
  const sheet = spread.getActiveSheet();
  const csv = sheet.getCsv(0, 0, sheet.getRowCount(), sheet.getColumnCount(), "\r\n", ",");
  const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
  const link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  link.download = "spreadsheet-export.csv";
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

After editing data in the spreadsheet, clicking the Export CSV button generates and downloads a CSV file, confirming that the export logic is functioning correctly and that the Vue CSV import/export workflow with SpreadJS allows users to easily save their spreadsheet data back to a CSV format.

Run Your Application

In this final step, you can start the Vue development server to see your CSV import/export functionality in action. With the project set up and all code in place, running npm run dev launches your Vue application locally. Once the server is running, open your browser and navigate to http://localhost:5173. 

Conclusion

SpreadJS combined with Vue provides a seamless way to handle CSV data directly in the browser, allowing developers to create interactive and responsive spreadsheet applications. With the ability to import and export CSV files efficiently, users can manage tabular data without relying on external software, making Vue CSV import/export a practical and powerful solution for web applications.