Cómo usar Vue para importar datos de tablas de Excel, realizar la carga y el análisis de archivos de tablas de Excel en el front-end y usar el componente Table para mostrar los datos analizados en la página del front-end

Con el desarrollo de Internet y el progreso de la sociedad, la cantidad de datos en varias industrias está aumentando y el procesamiento de datos es cada vez más importante. Entre ellos, la tabla de Excel es una importante herramienta de procesamiento de datos. En proyectos front-end y back-end, cada vez es más común implementar las funciones de importación y exportación de tablas de Excel. Este artículo presentará cómo usar Vue para importar datos de tablas de Excel.

1. Conocimientos previos

Antes de comenzar a presentar la implementación de Vue para importar datos de tablas de Excel, describamos brevemente los conocimientos previos relevantes.

1.1 tabla de Excel

Excel es un software de hoja de cálculo desarrollado por Microsoft, que es ampliamente utilizado en diversas industrias. Las tablas de Excel pueden ayudar a los usuarios a procesar datos rápidamente y realizar análisis de datos visuales. Los archivos de Excel pueden existir en formato .xlsx o .xls, y usar más el formato .xlsx.

1.2 Marco frontal Vue

Vue es un marco JavaScript progresivo basado en datos. Es fácil de aprender y usar, con una API elegante y una sintaxis de plantilla concisa. El framework Vue puede ayudarnos a construir aplicaciones web de manera más eficiente.

1.3 Marco de interfaz de usuario front-end ElementUI

ElementUI es una biblioteca de componentes de escritorio basada en Vue.js 2.0. Proporciona una gran cantidad de componentes básicos y componentes comerciales, que pueden ayudar rápidamente a los desarrolladores a crear aplicaciones web de alta calidad.

2. Pasos de implementación

Después de comprender el conocimiento previo, comencemos a presentar cómo usar Vue para importar datos de tablas de Excel.

2.1 Importar archivo xlsx

Para realizar la importación de datos de la tabla de Excel, primero debe importar el archivo de la tabla de Excel al front-end. Para esto, podemos usar xlsxesta biblioteca de JavaScript para lograrlo. npmInstale la biblioteca usando xlsx:

npm install xlsx --save

En el componente Vue, use el siguiente código para cargar y leer archivos:

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' }) // ... } } }

En el código anterior, readAsBinaryStringel archivo de Excel cargado se convierte en una cadena binaria llamando al método, y la XLSX.readcadena se analiza en un objeto JavaScript usando el método.

2.2 Análisis de datos de tablas de Excel

Después de obtener el objeto JavaScript, se puede analizar y mostrar los datos que contiene. Los pasos específicos son los siguientes:

const sheet = workbook.Sheets[workbook.SheetNames[0]] const data = XLSX.utils.sheet_to_json(sheet, { header: 1 })

En el código anterior, primero workbook.SheetNamesobtenga el nombre de la primera hoja de la tabla de Excel y use workbook.Sheetsatributos para obtener los datos de la hoja. A continuación, XLSX.utils.sheet_to_jsonse llama a un método para analizar los datos del formulario en una matriz de JavaScript.

2.3 Renderizar datos a la tabla

El último paso es representar los datos analizados en la página de inicio. Podemos usar el componente Table provisto por ElementUI para lograrlo.

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

En el código anterior, use sliceel método para eliminar el primer elemento de la matriz (es decir, la fila del encabezado de la tabla) y luego use mapel método para analizar cada fila de datos en un objeto y, finalmente, asigne estos objetos a tableDatalos atributos. .

3. Resumen

Este artículo presenta cómo usar Vue para importar datos de tablas de Excel. A través de los pasos anteriores, podemos cargar y analizar archivos de tablas de Excel en el front-end y usar el componente Table para mostrar los datos analizados en la página del front-end. Cuando necesitamos agregar información en lotes, se puede lograr fácilmente.