인터넷의 발달과 사회의 진보에 따라 다양한 산업 분야에서 데이터의 양이 증가하고 있으며, 데이터 처리의 중요성이 점점 더 커지고 있습니다. 그 중 엑셀 테이블은 중요한 데이터 처리 도구이다. 프런트엔드 및 백엔드 프로젝트에서 Excel 테이블의 가져오기 및 내보내기 기능을 구현하는 것이 점점 보편화되고 있습니다. 이 기사에서는 Vue를 사용하여 Excel 테이블 데이터를 가져오는 방법을 소개합니다.
1. 전제 지식
Excel 테이블 데이터를 가져오기 위한 Vue 구현을 소개하기 전에 관련 사전 지식을 간략하게 설명하겠습니다.
1.1 엑셀 표
Excel은 다양한 산업 분야에서 널리 사용되는 Microsoft에서 개발한 스프레드시트 소프트웨어입니다. Excel 표는 사용자가 데이터를 빠르게 처리하고 시각적 데이터 분석을 수행하는 데 도움이 됩니다. Excel 파일은 .xlsx 또는 .xls 형식으로 존재할 수 있으며 .xlsx 형식을 더 많이 사용합니다.
1.2 프런트엔드 프레임워크 Vue
Vue는 데이터 중심의 프로그레시브 JavaScript 프레임워크입니다. 우아한 API와 간결한 템플릿 구문으로 쉽게 배우고 사용할 수 있습니다. Vue 프레임워크는 웹 애플리케이션을 보다 효율적으로 구축하는 데 도움이 될 수 있습니다.
1.3 프런트엔드 UI 프레임워크 ElementUI
ElementUI는 Vue.js 2.0을 기반으로 하는 데스크톱 구성 요소 라이브러리입니다. 풍부한 기본 구성 요소와 비즈니스 구성 요소를 제공하여 개발자가 고품질 웹 응용 프로그램을 신속하게 구축할 수 있도록 지원합니다.
2. 구현 단계
사전 지식을 이해한 후 Vue를 사용하여 Excel 테이블 데이터를 가져오는 방법을 소개하겠습니다.
2.1 xlsx 파일 가져오기
Excel 테이블 데이터 가져오기를 실현하려면 먼저 Excel 테이블 파일을 프런트 엔드로 가져와야 합니다. 이를 위해 xlsx이 JavaScript 라이브러리를 사용하여 달성할 수 있습니다. 다음을 사용하여 라이브러리를 npm설치합니다 xlsx.
npm install xlsx --saveVue 구성 요소에서 다음 코드를 사용하여 파일을 업로드하고 읽습니다.
import XLSX from 'xlsx' methods: { handleChange(file) { const reader = new FileReader() reader.readAsBinaryString(file.raw) reader.onload = () => { const workbook = XLSX.read(reader.result, { type: 'binary' }) // ... } } }위의 코드에서 readAsBinaryString업로드된 엑셀 파일은 메서드를 호출하여 바이너리 문자열로 변환하고, XLSX.read메서드를 사용하여 문자열을 JavaScript 객체로 파싱합니다.
2.2 Excel 테이블 데이터 파싱
JavaScript 객체를 가져온 후 파싱할 수 있고 그 안에 있는 데이터를 표시할 수 있습니다. 구체적인 단계는 다음과 같습니다.
const sheet = workbook.Sheets[workbook.SheetNames[0]] const data = XLSX.utils.sheet_to_json(sheet, { header: 1 })위의 코드에서 먼저 workbook.SheetNamesExcel 테이블의 첫 번째 시트 이름을 얻고 workbook.Sheets속성을 사용하여 시트의 데이터를 가져옵니다. 다음으로 XLSX.utils.sheet_to_json양식의 데이터를 JavaScript 배열로 구문 분석하기 위해 메소드가 호출됩니다.
2.3 테이블에 데이터 렌더링
마지막 단계는 구문 분석된 데이터를 프런트 엔드 페이지에 렌더링하는 것입니다. ElementUI에서 제공하는 Table 구성 요소를 사용하여 달성할 수 있습니다.
<template> <el-table :data="tableData"> <el-table-column label="编号" prop="id"></el-table-column> <el-table-column label="姓名" prop="name"></el-table-column> <!-- ... --> </el-table> </template> <script> export default { data() { return { tableData: [] } }, methods: { handleChange(file) { // 读取Excel文件 const reader = new FileReader() reader.readAsBinaryString(file.raw) reader.onload = () => { const workbook = XLSX.read(reader.result, { type: 'binary' }) // 解析Excel表格数据 const sheet = workbook.Sheets[workbook.SheetNames[0]] const data = XLSX.utils.sheet_to_json(sheet, { header: 1 }) this.tableData = data.slice(1).map((item) => { return { id: item[0], name: item[1], // ... } }) } } } } </script>위의 코드에서 slice메서드를 사용하여 배열의 첫 번째 요소(즉, 테이블의 헤더 행)를 제거한 다음 map메서드를 사용하여 데이터의 각 행을 개체로 구문 분석하고 마지막으로 이러한 개체를 tableData속성 에 할당합니다. .
3. 요약
이 기사에서는 Vue를 사용하여 Excel 테이블 데이터를 가져오는 방법을 소개합니다. 위의 단계를 통해 프런트 엔드에 Excel 테이블 파일을 업로드 및 구문 분석하고 테이블 구성 요소를 사용하여 프런트 엔드 페이지에 구문 분석된 데이터를 표시할 수 있습니다. 일괄적으로 정보를 추가해야 하는 경우 쉽게 달성할 수 있습니다.