Vue에서 사용자 정의 필드가 있는 Excel 파일을 가져오는 방법

인터넷 기술이 지속적으로 발전하면서 방대한 양의 데이터를 관리하고 분석해야 하는 기업이 늘어나고 있으며, 이 데이터의 대부분은 엑셀 형태로 존재하고 있습니다. Vue 기반 웹 애플리케이션은 일반적으로 데이터 분석 및 데이터 애플리케이션을 위해 Excel 파일을 가져와야 합니다. Vue에는 Excel 파일을 가져올 수 있는 많은 라이브러리가 있지만 일반적으로 Excel 파일의 데이터 형식이 필요한 형식을 반드시 충족하지는 않으므로 데이터 통합 ​​및 분석 요구에 맞게 가져온 Excel 데이터에 대한 필드를 사용자 정의해야 합니다. 이 기사에서는 Vue에서 사용자 정의 필드를 Excel 파일로 가져오는 방법을 소개합니다.

1. Excel 파일 가져오기

Vue 애플리케이션에서는 일반적으로 일부 타사 라이브러리를 사용하여 Excel 파일을 가져옵니다. 이러한 도구에는 ExcelJS, Xlsx 등이 포함됩니다. 이 기사에서는 Vue를 사용하여 Excel 파일을 가져오는 방법을 소개하기 위해 ExcelJS를 예로 사용합니다. 먼저 ExcelJS 종속성 패키지를 설치해야 합니다.

npm install exceljs --save

그런 다음 Vue 구성 요소에서 ExcelJS를 가져옵니다.

import ExcelJS from 'exceljs';

그런 다음 ExcelJS를 사용하여 Excel 파일을 로드해야 합니다. 여기서는 이를 구현하기 위해 JavaScript의 FileReader 개체를 사용합니다.

export default {
  name: 'ImportExcel',
  data() {
    return {};
  },
  methods: {
    handleImportExcel(file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const result = e.target.result;
        const workbook = new ExcelJS.Workbook();
        workbook.xlsx.load(result).then((book) => {
          // 处理Workbook对象
        });
      };
      reader.readAsArrayBuffer(file);
    },
  },
};

이 예에서는 Excel 파일 읽기를 처리하기 위해 handlerImportExcel 메서드를 정의하고, new FileReader()를 통해 새 FileReader 객체를 생성하고, Excel 파일을 ArrayBuffer 유형(콘텐츠)으로 읽어서 파일 인코딩 형식 문제를 피할 수 있습니다. .

ExcelJS는 xlsx, xls, csv, ods 등을 포함한 다양한 파일 형식을 지원합니다. 여기서는 load() 메서드를 사용하여 Excel 파일의 내용을 읽고 Excel로 가져오는 사용자 지정 열의 초기 데이터인 Workbook 개체를 반환합니다.

2. 가져온 사용자 정의 열

Excel 파일을 성공적으로 가져온 후 데이터 통합을 계속하기 전에 데이터를 사용자 정의 열로 필터링하고 처리해야 합니다. 이 프로세스는 데이터 요구 사항을 충족하기 위해 Vue의 계산된 속성 또는 필터를 사용하여 구현할 수 있습니다.

export default {
  name: 'ImportExcel',
  data() {
    return {};
  },
  methods: {
    handleImportExcel(file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const result = e.target.result;
        const workbook = new ExcelJS.Workbook();
        workbook.xlsx.load(result).then((book) => {
          const worksheet = book.worksheets[0];
          const headers = [];
          worksheet.eachRow((row) => {
            if (row.number === 1) {
              row.eachCell((cell) => {
                headers.push(cell.value);
              });
            }
          });
          const data = [];
          worksheet.eachRow((row, rowNumber) => {
            if (rowNumber > 1) {
              const rowData = {};
              row.eachCell((cell, colNumber) => {
                const colName = headers[colNumber - 1];
                rowData[colName] = cell.value;
              });
              data.push(rowData);
            }
          });
          this.$emit('add-data', data);
        });
      };
      reader.readAsArrayBuffer(file);
    },
  },
};

이 예에서는 ExcelJS 메서드를 사용하여 Excel 파일의 워크시트 개체를 읽습니다. 그런 다음 헤더 배열을 만들고 워크시트 개체의 EachRow() 메서드를 통해 Excel 파일의 헤더를 순회한 다음 헤더의 각 셀 값을 헤더 배열에 저장했습니다. 그런 다음 EachRow() 및 EachCell() 메서드를 통해 Excel의 행과 열을 순회하고 행의 각 셀의 데이터를 헤더 배열에 대응시키고 결과를 rowData 개체에 저장합니다. 마지막으로 rowData는 데이터 배열에 저장되고, 마지막으로 데이터는 Vue의 $emit() 메서드를 통해 상위 구성 요소로 전달됩니다.

3. 사용자 정의 열 렌더링

Excel 파일을 성공적으로 가져온 후에는 사용자 정의 열을 사용하여 데이터를 자유롭게 필터링하고 처리할 수 있습니다. Vue에서는 계산된 속성이나 필터를 사용하여 데이터의 사용자 지정 처리를 구현할 수 있습니다.

<template>
  <table>
    <thead>
      <tr>
        <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in filteredData" :key="index">
        <td>{{ row.id }}</td>
        <td>{{ row.name }}</td>
        <td>{{ row.age }}</td>
        <td>{{ row.gender }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: "CustomFields",
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    headers() {
      const firstRow = this.data[0];
      return Object.keys(firstRow);
    },
    filteredData() {
      return this.data.map((item) => {
        return {
          id: item.ID,
          name: item.Name,
          age: item.Age,
          gender: item.Gender === "M" ? "男" : "女",
        };
      });
    },
  },
};
</script>

이 예에서는 계산된 속성 헤더를 통해 전달된 데이터의 헤더 정보를 얻습니다. filteredData에서는 데이터의 각 행에 대한 사용자 정의 열을 필터링 및 처리하고 ID, 이름, 나이 및 성별과 같은 원본 필드에 대해 2차 처리를 수행합니다.

4. 요약

이 글에서는 VueWeb 애플리케이션에서 Excel 파일을 가져오는 방법과 가져온 데이터를 사용자 정의 열로 처리하는 방법을 소개합니다. ExcelJS 도구 라이브러리를 사용하여 Excel 파일의 내용을 읽고, Vue 구성 요소의 계산된 속성이나 필터를 사용하여 가져온 Excel에 대한 사용자 지정 열 처리를 구현합니다. 이러한 기술을 통해 우리는 Excel 파일 데이터를 보다 효율적이고 유연하게 처리하고 사용할 수 있습니다.

위 내용은 Vue에서 사용자 정의 필드가 있는 Excel 파일을 가져오는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!