De 0 a 1, el front-end lee la tabla de Excel y la muestra en la interfaz
- Este artículo tiene como objetivo resolver la necesidad de realizar el archivo de formulario de lectura de front-end, obtener el contenido del archivo y renderizar a la interfaz sin llamar a la interfaz de back-end.
- Mis otros artículos abordan las necesidades de escalado:
- Realice la fusión automática de celdas después de leer las tablas analizadas
- Después de leer y analizar el formulario , configure automáticamente el color de la celda de acuerdo con el análisis de comparación de datos
- Realice análisis de datos (diálisis) después de leer y analizar la tabla para generar diagramas de relaciones de efecto que puedan satisfacer las necesidades definidas por el usuario
- Descargar función de formulario de interfaz
ilustrar
La empresa suele hacer muchos sistemas de gestión de fondo , y necesidades similares son muy comunes. También he escrito publicaciones similares, pero solo ponen códigos y nunca escriben notas y pasos. Oye, no hay mucho que decir, este artículo es un registro completo. :
premisa
Por lo general, uso a menudo:
Ant Design + Angular
Element UI + Vue
Ant Design + Vue
Para mayor comodidad, hoy usamos Element UI + Vue para comenzar directamente
en función de vue-element-admin
repositorio de código
1. Dirección de la nube de código
2. Dirección de github
Paso 1: Preparativos
- Haga clic para ingresar a la descarga de vue-element-admin
- descargar descomprimir
- instalar dependencias, ejecutar
- ejecutar con éxito
Paso 2: implementar el análisis de la tabla de importación
- Introduzca la siguiente ruta;
src\views\dashboard\index.vue
- Eliminar código inútil, listo para comenzar;
<template>
<div class="dashboard-container">
</div>
</template>
<script>
export default {
name: 'Dashboard'
}
</script>
<style lang="scss" scoped>
</style>
- Agregar botón de importación , guardar y actualizar;
<template>
<div class="dashboard-container">
<!-- 导入按钮 -->
<div class="button_group">
<a
href="javascript:;"
class="button_s my_file el-button button_s el-button--primary el-button--small"
>
<input type="file" class="my_input" @change="importExcel" id="upload" />导入
</a>
</div>
<!-- 导入按钮 -->
</div>
</template>
<script>
export default {
name: 'Dashboard',
methods: {
/**
* 导入表格
*/
importExcel(e) {
}
}
}
</script>
<style lang="scss" scoped>
// 按钮样式
.button_group {
.button_s {
width: 78px;
margin: 5px 10px 5px 5px;
}
.button_m {
width: 100px;
margin: 5px 10px 5px 5px;
}
.my_file {
position: relative;
.my_input {
position: absolute;
opacity: 0;
width: 78px;
height: 30px;
top: 0;
left: 0;
}
}
}
// 按钮样式
</style>
-
Descargar xlsx , importar;
-
Escriba la función de formulario de importación, guarde y actualice;
<script>
import xlsx from "xlsx";
export default {
name: 'Dashboard',
methods: {
/**
* 导入表格
*/
importExcel(e) {
const files = e.target.files;
console.log(files);
if (!files.length) {
return ;
} else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
return alert("上传格式不正确，请上传xls或者xlsx格式");
}
const fileReader = new FileReader();
fileReader.onload = ev => {
try {
const data = ev.target.result;
const XLSX = xlsx;
const workbook = XLSX.read(data, {
type: "binary"
});
const wsname = workbook.SheetNames[0]; //取第一张表，wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容，wb.Sheets[Sheet名]获取第一个Sheet的数据
const excellist = []; //清空接收数据
//编辑数据
for (var i = 0; i < ws.length; i++) {
excellist.push(ws[i]);
}
console.log("读取结果", excellist); // 此时得到的是一个内容是对象的数组需要处理
} catch (e) {
return alert("读取失败!");;
}
};
fileReader.readAsBinaryString(files[0]);
var input = document.getElementById("upload");
input.value = "";
}
}
}
</script>
-
Escribe la siguiente tabla para probar la función ;
-
A veces, el título de la tabla está en chino, y queremos obtener el nombre del atributo en inglés después de leer, luego agregar el siguiente código y probar nuevamente;
<script>
import xlsx from "xlsx";
export default {
name: 'Dashboard',
methods: {
getHeader(sheet) {
const XLSX = xlsx;
const headers = [];
const range = XLSX.utils.decode_range(sheet["!ref"]); // worksheet['!ref'] 是工作表的有效范围
let C;
/* 获取单元格值 start in the first row */
const R = range.s.r; // 行 // C 列
let i = 0;
for (C = range.s.c; C <= range.e.c; ++C) {
var cell =
sheet[
XLSX.utils.encode_cell({
c: C, r: R })
]; /* 根据地址得到单元格的值find the cell in the first row */
var hdr = "UNKNOWN" + C; // 如果有空表头，会替换为您想要的默认值replace with your desired default
// XLSX.utils.format_cell 生成单元格文本值
if (cell && cell.t) hdr = XLSX.utils.format_cell(cell);
if(hdr.indexOf('UNKNOWN') > -1){
if(!i) {
hdr = '__EMPTY';
}else {
hdr = '__EMPTY_' + i;
}
i++;
}
headers.push(hdr);
}
return headers;
},
/**
* 导入表格
*/
importExcel(e) {
const files = e.target.files;
console.log(files);
if (!files.length) {
return ;
} else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
return alert("上传格式不正确，请上传xls或者xlsx格式");
}
const fileReader = new FileReader();
fileReader.onload = ev => {
try {
const data = ev.target.result;
const XLSX = xlsx;
const workbook = XLSX.read(data, {
type: "binary"
});
const wsname = workbook.SheetNames[0]; //取第一张表，wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容，wb.Sheets[Sheet名]获取第一个Sheet的数据
const excellist = []; //清空接收数据
//编辑数据
for (var i = 0; i < ws.length; i++) {
excellist.push(ws[i]);
}
console.log("读取结果", excellist); // 此时得到的是一个内容是对象的数组需要处理
// 获取表头2-1
const a = workbook.Sheets[workbook.SheetNames[0]];
const headers = this.getHeader(a);
console.log('headers', headers);
// 获取表头2-2
} catch (e) {
return alert("读取失败!");;
}
};
fileReader.readAsBinaryString(files[0]);
var input = document.getElementById("upload");
input.value = "";
}
}
}
</script>
Cambiamos el formulario a un estado irregular, lo guardamos y abrimos la prueba de interfaz
Paso 3: implementar la representación de tablas
- La interfaz agrega componentes de tabla .
<!-- 表格组件 -->
<div class="myTable">
<el-table
max-height="600"
:data="dataArr"
v-loading="tableLoading"
:span-method="objectSpanMethod"
border
style="width: 100%"
>
<el-table-column
:prop="item.prop"
:label="item.label"
:width="item.width"
v-for="(item, i) in tableColumn"
:key="i"
></el-table-column>
</el-table>
</div>
<!-- 表格组件 -->
data() {
return {
dataArr: [], // 表格内容数据数组
// countArr: {}, // 分析表格数据以及表头，得到一个对照数组，用来进行自定义合并，本文暂时只写基础，不介绍自动合并单元格了哟~~我的其他文章有写自定义合并实现方法~
tableColumn: [], // 表格表头配置数组
tableLoading: false // 表格是否loading
};
},
2. Agregue el método de representación de tablas .
Observaciones: parte del código en el método de representación de tablas se usa para mapear nombres de atributos en chino e inglés. Esta es una función que agregué. A veces no es necesario usarla. Puede modificar el código según sus necesidades;
setTable(headers, excellist) {
const tableTitleData = []; // 存储表格表头数据
const tableMapTitle = {
}; // 设置表格内容中英文对照用
headers.forEach((_, i) => {
tableMapTitle[_] = "prop" + i;
tableTitleData.push({
prop: "prop" + i,
label: _,
width: 100
});
});
console.log("tableTitleData", tableTitleData);
// 映射表格内容属性名为英文
const newTableData = [];
excellist.forEach(_ => {
const newObj = {
};
Object.keys(_).forEach(key => {
newObj[tableMapTitle[key]] = _[key];
});
newTableData.push(newObj);
});
console.log('newTableData',newTableData);
this.tableColumn = tableTitleData;
this.dataArr = newTableData;
},
- Llame al método de representación de tablas .
// 在importExcel(e)方法中添加下面代码
// 渲染表格1-1
this.setTable(headers, excellist);
// 渲染表格1-2
- prueba de funcionamiento
epílogo
Este código admite datos irregulares, y aquellos sin encabezados también se pueden representar en la interfaz ~~
Bienvenidos a todos a señalar los errores en mi código ~
Si hay una mejor manera de escribir, pueden sugerirla y progresar juntos ~ ~