Vue项目中如何实现数据的导出和导入功能

npm install xlsx file-saver

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

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');}

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

npm install xlsx

import XLSX from 'xlsx';

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);  });}

<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>