Com o desenvolvimento da Internet e o progresso da sociedade, a quantidade de dados em vários setores está aumentando e o processamento de dados está se tornando cada vez mais importante. Dentre eles, a tabela Excel é uma importante ferramenta de processamento de dados. Em projetos front-end e back-end, é cada vez mais comum implementar as funções de importação e exportação de tabelas do Excel. Este artigo apresentará como usar o Vue para importar dados de tabelas do Excel.
1. Pré-requisito de conhecimento
Antes de começar a apresentar a implementação do Vue para importar dados de tabelas do Excel, vamos descrever brevemente o pré-conhecimento relevante.
1.1 Tabela Excel
O Excel é um software de planilha eletrônica desenvolvido pela Microsoft, amplamente utilizado em diversos setores. As tabelas do Excel podem ajudar os usuários a processar dados rapidamente e realizar análises de dados visuais. Os arquivos do Excel podem existir no formato .xlsx ou .xls e usar mais o formato .xlsx.
1.2 Estrutura front-end Vue
Vue é uma estrutura JavaScript progressiva orientada a dados. É fácil de aprender e usar, com uma API elegante e uma sintaxe de modelo concisa. A estrutura Vue pode nos ajudar a criar aplicativos da Web com mais eficiência.
1.3 Front-end UI framework ElementUI
ElementUI é uma biblioteca de componentes de desktop baseada em Vue.js 2.0. Ele fornece uma variedade de componentes básicos e de negócios, que podem ajudar rapidamente os desenvolvedores a criar aplicativos da Web de alta qualidade.
2. Etapas de implementação
Depois de entender o pré-conhecimento, vamos começar a apresentar como usar o Vue para importar dados de tabelas do Excel.
2.1 Importar arquivo xlsx
Para realizar a importação dos dados da tabela do Excel, primeiro você precisa importar o arquivo da tabela do Excel para o front-end. Para isso, podemos usar xlsxesta biblioteca JavaScript para conseguir. npmInstale a biblioteca usando xlsx:
npm install xlsx --saveNo componente Vue, use o seguinte código para carregar e ler arquivos:
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' }) // ... } } }No código acima, readAsBinaryStringo arquivo Excel carregado é convertido em uma string binária chamando o método e a XLSX.readstring é analisada em um objeto JavaScript usando o método.
2.2 Analisando os dados da tabela do Excel
Depois de obter o objeto JavaScript, ele pode ser analisado e os dados contidos nele podem ser exibidos. As etapas específicas são as seguintes:
const sheet = workbook.Sheets[workbook.SheetNames[0]] const data = XLSX.utils.sheet_to_json(sheet, { header: 1 })No código acima, primeiro workbook.SheetNamesobtenha o nome da primeira Planilha da tabela do Excel e use os workbook.Sheetsatributos para obter os dados da planilha. Em seguida, XLSX.utils.sheet_to_jsonum método é chamado para analisar os dados do formulário em uma matriz JavaScript.
2.3 Renderizar dados para a tabela
A última etapa é renderizar os dados analisados na página de front-end. Podemos usar o componente Table fornecido pelo ElementUI para alcançar.
<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>No código acima, use sliceo método para remover o primeiro elemento da matriz (ou seja, a linha de cabeçalho da tabela) e, em seguida, use mapo método para analisar cada linha de dados em um objeto e, finalmente, atribuir esses objetos a tableDataatributos .
3. Resumo
Este artigo apresenta como usar o Vue para importar dados de tabelas do Excel. Através das etapas acima, podemos carregar e analisar arquivos de tabela do Excel no front-end e usar o componente Tabela para exibir os dados analisados na página do front-end. Quando precisamos adicionar informações em lotes, isso pode ser feito facilmente.