Cómo crear informes de Excel a través de la interacción front-end y back-end

El equipo de la comunidad de código abierto de China realizó su primera transmisión en vivo, contando la historia detrás de la comunidad de código abierto de China en nombre de compartir".

Prefacio

Excel tiene la audiencia más amplia en el campo de la oficina y se ha convertido en una herramienta insustituible con sus potentes funciones de visualización y procesamiento de datos. No solo puede presentar datos con claridad, sino también realizar operaciones como análisis de datos, producción de gráficos y rotación de datos, brindando a los usuarios capacidades integrales de análisis y visualización de datos.

Hoy, el editor le presentará cómo implementar una plantilla de informe de Excel e ingresar y completar datos a través del control de tabla de front-end SpreadJS de Grape City Company y el componente de tabla de back-end GcExcel.

Preparación ambiental

Nodo.js

Editor de formularios en línea SpreadJS

Archivo de código (puede usarse como referencia para leer este artículo)

Interfaz

Diseñar plantilla de informe de Excel

1. Cargue la fuente de datos para realizar informes:

Abra el editor de tablas en línea de SpreadJS . Antes de diseñar el informe agrupado, debe realizar el trabajo de preparación de datos. Haga clic en el botón [Fuente de datos] en la pestaña [Datos] en la barra de herramientas de la tabla para agregarle una fuente de datos.

Utilice el botón [Agregar tabla] para agregar cada objeto de fuente de datos (cada objeto de fuente de datos corresponde a una tabla) y configure la ruta para leer los datos (la ruta puede ser una dirección que solicite la fuente de datos de formato correspondiente, o puede ser un servidor La dirección solicitada, el servidor devuelve un objeto de fuente de datos que se ajusta al formato).

La ruta de datos es un campo opcional. Si json contiene varias fuentes de datos, puede distinguirlas configurando la ruta de datos.

2. Agregar plantilla de informe:

Después de agregar la fuente de datos, haga clic en el botón de informe de la pestaña [Insertar] para insertar una nueva plantilla de informe. El objeto de fuente de datos agregado previamente se mostrará en la lista de fuentes de datos a la izquierda, como se muestra en la siguiente figura.

3. Configure informes agrupados:

Al arrastrar los campos en la lista de fuentes de datos a la izquierda, puede crear rápidamente una plantilla de informe que agrupe los campos de área de ventas, provincia, ciudad y tipo de producto para contar las ventas y las ganancias, como se muestra en la siguiente figura:

4. Guarde la plantilla de Excel como un archivo sjs.

Modificar plantilla de informe de Excel

Después de guardar la plantilla de informe de Excel como un archivo .sjs, el editor ahora necesita convertir algunas celdas de la plantilla de informe de Excel al lenguaje de plantilla GcExcel. Las operaciones específicas son las siguientes:

Coloque el archivo .sjs en el directorio raíz del código front-end de SpreadJS

5. Convierta la plantilla de Excel a la sintaxis de la plantilla GcExcel

Tomando la celda C4 (provincia) en la plantilla de informe de Excel (como se muestra en la figura siguiente) como ejemplo, el editor primero obtiene la información de la API de la plantilla (la información de la cola en DevTools en la figura siguiente) a través del método getBindingPath.

Después de obtener la información de la API, analice su ruta vinculante:

//此为部分代码，完整代码在文末的Gitee链接中
let binding = template.getBindingPath(r, c)  // binding内容如上图
// ... 
// 绑定路径
let path = ""
switch (binding && binding.type) {
    case "Group":
    case "List":
        if (binding.binding) {
            let p = binding.binding.match(/(?<=\[)[^\]\[]*(?=\])/g).join(".")
            path += ds + "." + p // path="销售数据.省份"
        }
        break;
    // ...
}

Luego analice su tipo de fusión y dirección de expansión:

// Group类型
let group = ""
if (binding && binding.type == "Group") {
    group = "G=M"
} else if (binding && binding.type == "List") {
    group = "G=L"
}
// Expand方向
let expand = ""
if (binding && binding.type != "Summary" && binding.spillDirection == "Vertical") {
   expand = "E=V"
} else if (binding && binding.type != "Summary" && binding.spillDirection == "Horizontal") {
   expand = "E=H"
}

Finalmente, después de integrar esta información y agregar llaves dobles, el contenido de la celda C4 en el archivo Excel exportado debe tener la siguiente sintaxis de plantilla GcExcel:

{{ds.销售数据.省份(E=V,G=M)}}

6. Ejecute el proyecto front-end y exporte el archivo de plantilla de Excel.

Ingrese el comando [npm install] para descargar las dependencias
Ingrese el comando [npm run start] para iniciar el proyecto (como se muestra en la siguiente figura después del inicio)

Finalmente, exporte la plantilla modificada a un archivo de Excel, como se muestra en la siguiente figura. Puede ver que la información en la unidad de provincia se ha modificado a la sintaxis de la plantilla GcExcel.

extremo posterior

Abra el código de fondo de GcExcel y coloque el archivo de plantilla de Excel previamente exportado en el directorio raíz del archivo de código. La última ejecución de la función principal puede transferir los datos al archivo de plantilla de Excel y, finalmente, se generará un informe de Excel con datos.

Conclusión

Lo anterior es todo el proceso de cómo usar SpreadJS + GcExcel para crear un informe de Excel. Si desea obtener más información, haga clic aquí para ver.

Enlace de extensión:

[Transmisión de información seca] ¡Lea todos los puntos clave del análisis de estados financieros en un solo artículo!

¿Por qué sus estados financieros no son excelentes? ¡Se recomienda que comprenda estos cuatro puntos de diseño y!

Análisis de escenarios de aplicación del control de tablas de Excel front-end puro en el campo del análisis de informes.

Cómo crear informes de Excel a través de la interacción front-end y back-end

Supongo que te gusta