Prefacio
Recientemente, el autor finalmente completó el establecimiento preliminar del sistema de gestión de antecedentes H5-Dooring, y tiene capacidades preliminares de recopilación y análisis de datos. A continuación, revisaremos los diversos puntos de conocimiento involucrados y explicaremos su visualización en Dooring H5. La solución en el editor. El autor se dividirá en 3 artículos para revisar, los principales escenarios de solución son los siguientes:
Cómo usar JavaScript para implementar archivos de Excel de importación y exportación de front-end (revisión de combate real del editor H5)
Cómo genera el front-end un informe de análisis de visualización de datos multidimensional basado en los datos de la tabla con un solo clic
Cómo realizar el enrutamiento de autoridad y el menú de autoridad en el sistema de gestión de miembros
Los escenarios anteriores también son problemas que los ingenieros de front-end suelen encontrar o encontrarán en el desarrollo de sistemas de administración de back-end. Este artículo es el primer artículo de la introducción anterior. Obtendrá:
Utilice JavaScript para importar archivos de Excel en la interfaz y generar automáticamente componentes de tabla editables
Utilice JavaScript para lograr la exportación con un clic de archivos de Excel basados en datos de tabla
Uso básico de XLSX y js-export-excel
texto
Los siguientes materiales de contenido de este artículo se basan en las capturas de pantalla del proyecto del editor visual H5 (H5-Dooring). Si desea tener una experiencia real, puede visitar la experiencia real del sitio web de H5-Dooring. A continuación, comenzamos directamente la implementación de nuestra solución.
1. Utilice JavaScript para importar archivos de Excel y generar automáticamente componentes de tabla editables
Antes de comenzar a lograr, echemos un vistazo al efecto de implementación.
1.1 Efecto de realización
Importe el archivo de Excel y renderice la tabla a través del componente de tabla de antd: Edite el componente de tabla:
Renderice el gráfico de visualización en tiempo real después de guardar los datos de la tabla: lo
anterior es el proceso completo de importar el archivo de Excel, editar la tabla y finalmente generar dinámicamente el gráfico.
1.2 Realice la importación de un archivo de Excel con un clic y genere un formulario de tabla
La función de importar archivos de Excel se puede analizar en forma nativa de JavaScript. Por ejemplo, podemos usar API nativas como fileReader. Sin embargo, considerando la eficiencia del desarrollo y el mantenimiento posterior, el autor usa el componente Upload de antd y XLSX para realizar la función de cargar archivos y analizarlos. Dado que usamos el componente de tabla de antd para representar datos, necesitamos convertir manualmente los datos analizados en un formato de datos compatible con la tabla. El proceso general es el siguiente: por lo que todo lo que tenemos que hacer es pasar los datos del archivo obtenidos por Upload a xlsx, por xlsx genera objetos analíticos, y finalmente usamos el algoritmo javascript para procesar objetos xlsx en formatos de datos compatibles con ant-table. Aquí usamos el objeto FileReader, el propósito es convertir el archivo a BinaryString, y luego podemos usar el modo binario xlsx Para leer los datos de Excel, el código es el siguiente:
// 解析并提取excel数据
let reader = new FileReader();
reader.onload = function(e) {
let data = e.target.result;
let workbook = XLSX.read(data, {type: 'binary'});
let sheetNames = workbook.SheetNames; // 工作表名称集合
let draftObj = {}
sheetNames.forEach(name => {
// 通过工作表名称来获取指定工作表
let worksheet = workbook.Sheets[name];
for(let key in worksheet) {
// v是读取单元格的原始值
if(key[0] !== '!') {
if(draftObj[key[0]]) {
draftObj[key[0]].push(worksheet[key].v)
}else {
draftObj[key[0]] = [worksheet[key].v]
}
}
}
});
// 生成ant-table支持的数据格式
let sourceData = Object.values(draftObj).map((item,i) => ({ key: i + '', name: item[0], value: item[1]}))
复制代码
Después del procesamiento anterior, el sourceData que obtenemos es la estructura de datos disponible para ant-table, hasta ahora nos hemos dado cuenta de la función de importación de tablas.
1.3 Realización de la función de edición de la tabla
La función de edición de la tabla es realmente muy simple. Solo necesitamos seguir la implementación de las filas y celdas personalizadas proporcionadas por el componente de tabla de antd. También hay implementaciones de tablas editables en el sitio web oficial de antd, de la siguiente manera: todos están interesados Puede estudiar lo siguiente de forma privada. Por supuesto, es muy fácil implementar tablas editables usted mismo, y hay muchas formas, como usar la función de renderizado de columnas para cambiar dinámicamente el estado de edición de la tabla, o usar la edición emergente, etc., son todas posibles.
1.4 Genere gráficos dinámicamente basados en datos de tablas editados
La generación dinámica de gráficos basados en datos de tablas requiere ciertas convenciones. Necesitamos cumplir con las especificaciones de datos de la biblioteca de gráficos. Sin embargo, tenemos datos de tablas. El procesamiento de las especificaciones de datos es, por supuesto, un asunto muy simple. La biblioteca de visualización del autor se implementa mediante antv's f2 Por lo tanto, se necesita una capa de adaptación para permitir que f2 consuma nuestros datos.
Otro punto es que para poder usar múltiples gráficos, necesitamos encapsular el gráfico f2 de manera uniforme para convertirlo en una biblioteca de componentes visuales que cumpla con los escenarios de nuestra aplicación. Veamos primero el formato de datos utilizado por f2:
const data = [
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 }
];
复制代码
Este formato de datos se representará en el siguiente gráfico: Por lo tanto, hemos resumido sus dos principales indicadores de latitud, incluido su gráfico de áreas, gráfico circular y gráfico de líneas. El formato es básicamente el mismo, por lo que podemos encapsularlo en componentes basados en esto. Los componentes visuales son los siguientes:
import { Chart } from '@antv/f2';
import React, { memo, useEffect, useRef } from 'react';
import ChartImg from '@/assets/chart.png';
import styles from './index.less';
import { IChartConfig } from './schema';
interface XChartProps extends IChartConfig {
isTpl: boolean;
}
const XChart = (props: XChartProps) => {
const { isTpl, data, color, size, paddingTop, title } = props;
const chartRef = useRef(null);
useEffect(() => {
if (!isTpl) {
const chart = new Chart({
el: chartRef.current || undefined,
pixelRatio: window.devicePixelRatio, // 指定分辨率
});
// step 2: 处理数据
const dataX = data.map(item => ({ ...item, value: Number(item.value) }));
// Step 2: 载入数据源
chart.source(dataX);
// Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
chart
.interval()
.position('name*value')
.color('name');
// Step 4: 渲染图表
chart.render();
}
}, [data, isTpl]);
return (
<div className={styles.chartWrap}>
<div className={styles.chartTitle} style={
{ color, fontSize: size, paddingTop }}>
{title}
</div>
{isTpl ? <img src={ChartImg} alt="dooring chart" /> : <canvas ref={chartRef}></canvas>}
</div>
);
};
export default memo(XChart);
复制代码
Por supuesto, otros componentes visuales también se pueden encapsular en el mismo modo, por lo que no daré un ejemplo uno por uno. La encapsulación de componentes anterior usa el componente hooks de react, y el de vue es similar, y los principios básicos son los mismos.
2. Utilice JavaScript para lograr la exportación de archivos de Excel con un clic en función de los datos de la tabla en la interfaz
De la misma manera, nos dimos cuenta de que la exportación con un clic de los datos de la tabla a Excel es similar, pero el esquema es diferente, echemos un vistazo al efecto de implementación en Dooring.
2.1 Exportación con un clic para sobresalir y lograr el efecto
Lo anterior es el proceso para que el usuario exporte el archivo de Excel con un clic en función de los datos recopilados en segundo plano. La última imagen es la presentación del archivo de Excel generado en el software de oficina.
2.2 Utilice javascript para realizar la función de archivo de Excel de exportación con un solo clic
La función de exportación con un solo clic se utiliza principalmente en la página de administración en segundo plano de H5-Dooring para brindar a los usuarios una capacidad conveniente para exportar datos. La función de exportación aquí aún se puede implementar usando xlsx, pero después de una comparación completa, el autor descubrió que existe una solución más simple. A continuación, el autor presentará en detalle. Primero, echemos un vistazo al proceso: obviamente, nuestro proceso de exportación es mucho más simple que el proceso de importación, solo necesitamos descompilar el formato de datos de la tabla en los datos admitidos por el complemento. Aquí el autor usa js -export-excel para hacer la exportación de archivos, usarlo es muy flexible, podemos personalizar:
Personalizar el nombre del archivo de Excel exportado
Campo de filtro de Excel personalizado
Personalice el nombre del encabezado de cada columna en el archivo de Excel
Dado que la estructura de datos admitida por js-export-excel es un objeto de matriz, necesitamos dedicar un poco de esfuerzo para convertir los datos de la tabla en un objeto de matriz. Cabe señalar que el valor correspondiente a la clave en la estructura de datos de la tabla ant puede ser una matriz, pero js El valor correspondiente a la clave -export-excel es una cadena, por lo que necesitamos convertir la matriz en una cadena, como [a, b, c] se convierte en 'a, b, c', por lo que debemos convertir el formato de datos, específicamente La implementación es la siguiente:
const generateExcel = () => {
let option = {}; //option代表的就是excel文件
let dataTable = []; //excel文件中的数据内容
let len = list.length;
if (len) {
for(let i=0; i<len; i++) {
let row = list[i];
let obj:any = {};
for(let key in row) {
if(typeof row[key] === 'object') {
let arr = row[key];
obj[key] = arr.map((item:any) => (typeof item === 'object' ? item.label : item)).join(',')
}else {
obj[key] = row[key]
}
}
dataTable.push(obj); //设置excel中每列所获取的数据源
}
}
let tableKeys = Object.keys(dataTable[0]);
option.fileName = tableName; //excel文件名称
option.datas = [
{
sheetData: dataTable, //excel文件中的数据源
sheetName: tableName, //excel文件中sheet页名称
sheetFilter: tableKeys, //excel文件中需显示的列数据
sheetHeader: tableKeys, //excel文件中每列的表头名称
}
]
let toExcel = new ExportJsonExcel(option); //生成excel文件
toExcel.saveExcel(); //下载excel文件
}
复制代码
Tenga en cuenta que la solución anterior implementada por el autor se puede usar para cualquier componente de la tabla, y el código anterior se puede usar directamente en la mayoría de los escenarios. Hasta ahora, hemos implementado la función de archivo de Excel de importación y exportación de front-end usando JavaScript.
Entonces, ¿estás bien informado hoy?
Al final
El autor del tutorial anterior se ha integrado en H5-Dooring. Para algunas funciones interactivas más complejas, también se puede realizar mediante un diseño razonable. Puede explorar y estudiar usted mismo.
github ????: editor en línea H5 H5-Dooring
O escanee el código QR a continuación para acceder:
Si desea obtener más información sobre juegos H5, webpack, node, gulp, css3, javascript, nodeJS, visualización de datos de lienzo y otros conocimientos de front-end y combate real, bienvenido a estudiar y discutir juntos en "Interesting Frontend" para explorar juntos el límite de front-end.
Área de comentarios
Finalmente, si aún tiene más energía, puede hacer clic para leer el texto original y continuar llenando el formulario ~