Vue와 Excel의 완벽한 통합: 데이터 일괄 채우기 및 가져오기를 수행하는 방법

// 导入xlsx库
import xlsx from 'xlsx';

export default {
  data() {
    return {
      data: [],   // 保存Excel中的数据
    };
  },
  methods: {
    // 选择并读取Excel文件
    handleFileUpload(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = xlsx.read(data, { type: 'array' });
        const sheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[sheetName];
        const jsonData = xlsx.utils.sheet_to_json(worksheet, { header: 1 });
        this.data = jsonData;
      };
      reader.readAsArrayBuffer(file);
    },
    // 批量填充数据
    batchFillData() {
      // 批量填充数据逻辑
    },
  },
};

// 导入xlsx库
import xlsx from 'xlsx';

export default {
  data() {
    return {
      importData: [],   // 保存导入的数据
    };
  },
  methods: {
    // 选择并读取Excel文件
    handleFileUpload(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = xlsx.read(data, { type: 'array' });
        const sheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[sheetName];
        const jsonData = xlsx.utils.sheet_to_json(worksheet, { header: 1 });
        this.importData = jsonData;
      };
      reader.readAsArrayBuffer(file);
    },
    // 导入数据
    importData() {
      // 导入数据逻辑
    },
  },
};