How to implement data export and import functions in Vue projects

How to implement data export and import functions in Vue projects

In Vue projects, implementing data export and import functions is a common requirement. For example, when users need to export data in a table to an Excel file, or when users need to import data from an Excel file into a table, we need to implement such export and import functions.

The following is a method to implement the export and import functions, including specific code examples.

1. Export data as Excel file

1. Installing dependencies
   First, install the two dependent libraries xlsx and file-saver in the Vue project. You can use npm or yarn to install.

npm install xlsx file-saver

2. Write export code
   In the component that needs to export data, first import the xlsx and file-saver libraries.

import XLSX from 'xlsx';
import { saveAs } from 'file-saver';

Then, write an exported function. This function receives an array of table data as a parameter, converts it to an Excel file, and saves the file.

export function exportToExcel(data) {
  const worksheet = XLSX.utils.json_to_sheet(data);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
  const excelBlob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });
  saveAs(excelBlob, 'data.xlsx');
}

3. Call the export function
   Call the export function where the data needs to be exported, and pass in the array of table data as a parameter.

export default {
  methods: {
    handleExport() {
      const data = [
        { name: 'John', age: 20 },
        { name: 'Jane', age: 25 },
        { name: 'Tom', age: 30 },
      ];
      exportToExcel(data);
    },
  },
};

2. Import data into the table

1. Install dependencies
   Install the xlsx dependency library in the Vue project.

npm install xlsx

2. Write import code
   In the component that needs to import data, first import the xlsx library.

import XLSX from 'xlsx';

Then, write an import function. This function receives an Excel file as a parameter, reads the data in the file, and returns an array.

export function importFromExcel(file) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = (event) => {
      const data = new Uint8Array(event.target.result);
      const workbook = XLSX.read(data, { type: 'array' });
      const worksheet = workbook.Sheets[workbook.SheetNames[0]];
      const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
      resolve(jsonData);
    };
    reader.readAsArrayBuffer(file);
  });
}

3. Call the import function
   Call the import function where data needs to be imported, and process the returned data.

<template>
  <input type="file" @change="handleImport">
</template>

<script>
import { importFromExcel } from '@/utils/excel';

export default {
  methods: {
    async handleImport(event) {
      const file = event.target.files[0];
      const data = await importFromExcel(file);
      // 处理导入的数据
      console.log(data);
    },
  },
};
</script>

The above is the method to implement the data export and import functions in the Vue project. The code can be adjusted and expanded according to actual needs. In this way, we can easily perform data export and import operations to improve user experience and efficiency.

Reference documentation:

1. [xlsx GitHub repository](https://github.com/SheetJS/sheetjs)
2. [FileSaver.js GitHub repository]( https://github.com/eligrey/FileSaver.js)

The above is the detailed content of How to implement data export and import functions in Vue projects. For more information, please follow other related articles on the PHP Chinese website!