Mostrar datos de Excel en HTML usando REST API en Node.js

Las páginas web HTML se pueden ver en cualquier navegador disponible en dispositivos portátiles. Mostrar datos de Excel en páginas HTML ayuda a mostrar datos a las partes interesadas relevantes sin compartir la hoja de cálculo de Excel real con ellos. Por lo tanto, podrían ver fácilmente la información/datos requeridos en cualquier navegador. En este artículo, aprenderemos cómo mostrar datos de Excel en HTML utilizando una API REST en Node.js.

En este artículo se tratarán los siguientes temas:

API REST de Excel to HTML Viewer y SDK de Node.js

Para renderizar hojas de cálculo XLS o XLSX, utilizaré la API Node.js SDK de GroupDocs.Viewer Cloud. Permite renderizar y ver todo tipo de documentos populares y formatos de archivos de imagen mediante programación. Instálalo usando el siguiente comando en la consola:

npm install groupdocs-conversion-cloud

Por favor, obtenga su ID de cliente y secreto del tablero antes de seguir los pasos mencionados. Una vez que tenga su ID y secreto, agregue el código como se muestra a continuación:

// Obtenga su ID de cliente y secreto del tablero y agregue el código como se muestra a continuación:
global.clientId = "112f0f38-9dae-42d5-b4fc-cc84ae644972";
global.clientSecret = "16ad3fe0bdc39c910f57d2fd48a5d618";
global.myStorage = "";

const configuration = new groupdocs_viewer_cloud.Configuration(clientId, clientSecret);
configuration.apiBaseUrl = "https://api.groupdocs.cloud";

Mostrar datos de Excel en HTML usando REST API en Node.js

Podemos mostrar datos de Excel en HTML siguiendo los sencillos pasos que se indican a continuación:

  1. Subir el archivo XLSX a la Nube
  2. Mostrar datos de Excel en HTML usando Node.js
  3. Descargar el archivo renderizado

Sube el documento

En primer lugar, cargaremos el archivo XLSX en la nube usando el ejemplo de código que se muestra a continuación:

// Este ejemplo de código demuestra cómo cargar un archivo XLSX a la nube
// Construir FileApi
let fileApi = groupdocs_viewer_cloud.FileApi.fromConfig(configuration);
let resourcesFolder = 'C:\\Files\\viewer\\sample.xlsx';

// Leer archivos uno por uno
fs.readFile(resourcesFolder, (err, fileStream) => {
  // Crear solicitud de archivo de carga
  let request = new groupdocs_viewer_cloud.UploadFileRequest("sample.xlsx", fileStream, myStorage);
  // Subir archivo
  fileApi.uploadFile(request);
});

Como resultado, el archivo cargado estará disponible en la sección de archivos del tablero en la nube.

Mostrar datos de Excel en HTML usando Node.js

Podemos representar o mostrar datos de Excel en páginas HTML mediante programación siguiendo los pasos que se detallan a continuación:

  • En primer lugar, cree una instancia de ViewApi.
  • A continuación, cree una instancia de FileInfo.
  • Luego, configure la ruta del archivo de entrada.
  • A continuación, cree una instancia de ViewOptions.
  • Luego, asigne FileInfo y configure “HTML” como viewFormat.
  • A continuación, cree una instancia de HtmlOptions.
  • Luego, inicie y asigne SpreadsheetOptions.
  • A continuación, configure varias opciones como paginateSheets, textOverflowMode, renderGridLines, etc.
  • Después de eso, cree una solicitud de vista llamando al método CreateViewRequest con viewOptions como argumento.
  • Finalmente, llame al método ViewApi.createView con CreateViewRequest como argumento para representar HTML.

El siguiente ejemplo de código muestra cómo mostrar datos de Excel en HTML usando una API REST en Node.js.

// Este ejemplo de código demuestra cómo representar Excel en una página HTML
// Inicialización de la API
let viewApi = groupdocs_viewer_cloud.ViewApi.fromKeys(clientId, clientSecret);

// Fichero de entrada
let fileInfo = new groupdocs_viewer_cloud.FileInfo();
fileInfo.filePath = "sample.xlsx";

// Definir opciones de vista
let viewOptions = new groupdocs_viewer_cloud.ViewOptions();
viewOptions.fileInfo = fileInfo;
viewOptions.viewFormat = groupdocs_viewer_cloud.ViewOptions.ViewFormatEnum.HTML;

// Definir opciones de renderizado
viewOptions.renderOptions = new groupdocs_viewer_cloud.HtmlOptions();

// Definir las opciones de representación de la hoja de cálculo
viewOptions.renderOptions.spreadsheetOptions = new groupdocs_viewer_cloud.SpreadsheetOptions();
viewOptions.renderOptions.spreadsheetOptions.paginateSheets = false;
viewOptions.renderOptions.spreadsheetOptions.textOverflowMode = groupdocs_viewer_cloud.SpreadsheetOptions.TextOverflowModeEnum.HideText;
viewOptions.renderOptions.spreadsheetOptions.renderGridLines = true;
viewOptions.renderOptions.spreadsheetOptions.renderHiddenColumns = true;
viewOptions.renderOptions.spreadsheetOptions.renderHiddenRows = true;

// Crear solicitud de vista
let request = new groupdocs_viewer_cloud.CreateViewRequest(viewOptions);
// Crear vista
let response = await viewApi.createView(request);

// Muestra la ruta de las páginas HTML procesadas
for (let page = 0; page < response.pages.length; page++) {
  console.log("Document rendered: " + response.pages[page].path);
}
Mostrar datos de Excel en HTML usando Node.js

Mostrar datos de Excel en HTML usando Node.js

De forma predeterminada, una hoja de trabajo se representa en una página. Podemos personalizar el renderizado de Excel aplicando las siguientes opciones:

  • Mostrar hojas de cálculo de Excel en varias páginas
viewOptions.renderOptions.spreadsheetOptions.paginateSheets = true;
viewOptions.renderOptions.spreadsheetOptions.countRowsPerPage = 45;
  • Mostrar líneas de cuadrícula en HTML
viewOptions.renderOptions.spreadsheetOptions.renderGridLines = true;
  • Representar filas y columnas vacías
viewOptions.renderOptions.spreadsheetOptions.renderEmptyRows = true;
viewOptions.renderOptions.spreadsheetOptions.renderEmptyColumns = true;
  • Mostrar filas y columnas ocultas
viewOptions.renderOptions.spreadsheetOptions.renderHiddenColumns = true;
viewOptions.renderOptions.spreadsheetOptions.renderHiddenRows = true;
  • Procesar área de impresión solamente
viewOptions.renderOptions.spreadsheetOptions.renderPrintAreaOnly = true;
  • Establecer modo de desbordamiento de texto
viewOptions.renderOptions.spreadsheetOptions.textOverflowMode = "HideText";

Descargar páginas HTML

El ejemplo de código anterior guardará las páginas HTML renderizadas en la nube. Se puede descargar usando el siguiente código de ejemplo:

// Este ejemplo de código demuestra cómo descargar una página HTML desde la nube
// Inicializar API
var fileApi = groupdocs_viewer_cloud.FileApi.fromConfig(configuration);

// Crear solicitud de descarga de archivos
let request = new groupdocs_viewer_cloud.DownloadFileRequest("/viewer/sample_xlsx/sample_page_1.html", myStorage);

// Descargar archivo
let response = await fileApi.downloadFile(request);

// Guardar archivo de imagen en el directorio de trabajo
fs.writeFile("C:\\Files\\viewer\\sample_xlsx\\sample_page_1.html", response, "binary", function (err) { });

Mostrar datos de Excel en HTML con marca de agua usando Node.js

Podemos agregar un texto de marca de agua mientras procesamos datos de Excel en páginas HTML mediante programación siguiendo los pasos que se detallan a continuación:

  • En primer lugar, cree una instancia de ViewApi.
  • A continuación, cree una instancia de FileInfo.
  • Luego, configure la ruta del archivo de entrada.
  • A continuación, cree una instancia de ViewOptions.
  • Luego, asigne FileInfo y configure “HTML” como viewFormat.
  • A continuación, cree y asigne una instancia de la marca de agua.
  • Luego, configure el tamaño y el texto de la marca de agua.
  • Después de eso, cree una solicitud de vista llamando al método CreateViewRequest con viewOptions como argumento.
  • Finalmente, llame al método ViewApi.createView con CreateViewRequest como argumento para representar HTML.

El siguiente ejemplo de código muestra cómo mostrar datos de Excel en HTML con marca de agua mediante una API REST en Node.js.

// Este ejemplo de código demuestra cómo representar Excel en una página HTML con marca de agua
// Inicialización de la API
let viewApi = groupdocs_viewer_cloud.ViewApi.fromKeys(clientId, clientSecret);

// Fichero de entrada
let fileInfo = new groupdocs_viewer_cloud.FileInfo();
fileInfo.filePath = "sample.xlsx";

// Definir opciones de vista
let viewOptions = new groupdocs_viewer_cloud.ViewOptions();
viewOptions.fileInfo = fileInfo;
viewOptions.viewFormat = groupdocs_viewer_cloud.ViewOptions.ViewFormatEnum.HTML;

// Agregar marca de agua
viewOptions.watermark = new groupdocs_viewer_cloud.Watermark();
viewOptions.watermark.size = 100;
viewOptions.watermark.text = "This is a sample watermark!";

// Crear solicitud de vista
let request = new groupdocs_viewer_cloud.CreateViewRequest(viewOptions);
// Crear vista
let response = await viewApi.createView(request);

// Muestra la ruta de las páginas HTML procesadas
for (let page = 0; page < response.pages.length; page++) {
  console.log("Document rendered: " + response.pages[page].path);
}
Mostrar datos de Excel en HTML con marca de agua usando Node.js

Mostrar datos de Excel en HTML con marca de agua usando Node.js

Prueba en línea

Pruebe la siguiente herramienta gratuita de representación de Excel en línea, que se desarrolla utilizando la API anterior. https://products.groupdocs.app/viewer/xlsx

Conclusión

En este artículo, hemos aprendido a mostrar datos de Excel como HTML en la nube. También hemos visto cómo agregar una marca de agua a las páginas HTML renderizadas usando Node.js. Este artículo también explicó cómo cargar mediante programación un archivo XLSX a la nube y luego descargar el archivo HTML renderizado desde la nube. Además, puede obtener más información sobre GroupDocs.Viewer Cloud API utilizando la documentación. También proporcionamos una sección Referencia de API que le permite visualizar e interactuar con nuestras API directamente a través del navegador. En caso de cualquier ambigüedad, no dude en contactarnos en el foro.

Ver también