Afficher les données Excel en HTML à l'aide de l'API REST dans Node.js

Les pages Web HTML peuvent être consultées dans n’importe quel navigateur disponible sur les appareils portables. L’affichage des données Excel sur des pages HTML permet de montrer les données aux parties prenantes concernées sans partager la feuille de calcul Excel réelle avec elles. Ainsi, ils pourraient facilement visualiser les informations/données requises dans n’importe quel navigateur. Dans cet article, nous allons apprendre à afficher des données Excel en HTML à l’aide d’une API REST dans Node.js.

Les sujets suivants seront traités dans cet article :

Excel vers HTML Viewer API REST et Node.js SDK

Pour le rendu des feuilles de calcul XLS ou XLSX, j’utiliserai l’API Node.js SDK of GroupDocs.Viewer Cloud. Il permet de rendre et de visualiser toutes sortes de documents populaires et de formats de fichiers image par programmation. Veuillez l’installer à l’aide de la commande suivante dans la console :

npm install groupdocs-conversion-cloud

Veuillez obtenir votre ID client et votre secret à partir du tableau de bord avant de suivre les étapes mentionnées. Une fois que vous avez votre identifiant et votre secret, ajoutez le code comme indiqué ci-dessous :

// Veuillez obtenir votre ID client et votre secret à partir du tableau de bord et ajouter le code comme indiqué ci-dessous :
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";

Afficher les données Excel en HTML à l’aide de l’API REST dans Node.js

Nous pouvons afficher des données Excel en HTML en suivant les étapes simples indiquées ci-dessous :

  1. Téléchargez le fichier XLSX dans le Cloud
  2. Afficher les données Excel en HTML à l’aide de Node.js
  3. Télécharger le fichier rendu

Télécharger le document

Tout d’abord, nous allons télécharger le fichier XLSX sur le Cloud en utilisant l’exemple de code ci-dessous :

// Cet exemple de code montre comment télécharger un fichier XLSX sur le Cloud
// Construire FileApi
let fileApi = groupdocs_viewer_cloud.FileApi.fromConfig(configuration);
let resourcesFolder = 'C:\\Files\\viewer\\sample.xlsx';

// Lire les fichiers un par un
fs.readFile(resourcesFolder, (err, fileStream) => {
  // Créer une demande de téléchargement de fichier
  let request = new groupdocs_viewer_cloud.UploadFileRequest("sample.xlsx", fileStream, myStorage);
  // Téléverser un fichier
  fileApi.uploadFile(request);
});

Par conséquent, le fichier téléchargé sera disponible dans la section des fichiers du tableau de bord sur le cloud.

Afficher des données Excel en HTML à l’aide de Node.js

Nous pouvons restituer ou afficher des données Excel sur des pages HTML par programmation en suivant les étapes ci-dessous :

  • Tout d’abord, créez une instance de ViewApi.
  • Ensuite, créez une instance de FileInfo.
  • Ensuite, définissez le chemin du fichier d’entrée.
  • Ensuite, créez une instance de ViewOptions.
  • Ensuite, attribuez FileInfo et définissez “HTML” comme viewFormat.
  • Ensuite, créez une instance de HtmlOptions.
  • Ensuite, lancez et affectez SpreadsheetOptions.
  • Ensuite, définissez diverses options telles que paginateSheets, textOverflowMode, renderGridLines, etc.
  • Après cela, créez une demande de vue en appelant la méthode CreateViewRequest avec viewOptions comme argument.
  • Enfin, appelez la méthode ViewApi.createView avec CreateViewRequest comme argument pour afficher le HTML.

L’exemple de code suivant montre comment afficher des données Excel au format HTML à l’aide d’une API REST dans Node.js.

// Cet exemple de code montre comment rendre Excel dans une page HTML
// Initialisation de l'API
let viewApi = groupdocs_viewer_cloud.ViewApi.fromKeys(clientId, clientSecret);

// Fichier d'entrée
let fileInfo = new groupdocs_viewer_cloud.FileInfo();
fileInfo.filePath = "sample.xlsx";

// Définir les options d'affichage
let viewOptions = new groupdocs_viewer_cloud.ViewOptions();
viewOptions.fileInfo = fileInfo;
viewOptions.viewFormat = groupdocs_viewer_cloud.ViewOptions.ViewFormatEnum.HTML;

// Définir les options de rendu
viewOptions.renderOptions = new groupdocs_viewer_cloud.HtmlOptions();

// Définir les options de rendu de la feuille de calcul
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;

// Créer une demande de vue
let request = new groupdocs_viewer_cloud.CreateViewRequest(viewOptions);
// Créer une vue
let response = await viewApi.createView(request);

// Afficher le chemin des pages HTML rendues
for (let page = 0; page < response.pages.length; page++) {
  console.log("Document rendered: " + response.pages[page].path);
}
Afficher des données Excel en HTML à l'aide de Node.js

Afficher des données Excel en HTML à l’aide de Node.js

Par défaut, une feuille de calcul est rendue sur une page. On peut personnaliser le rendu d’Excel en appliquant les options suivantes :

  • Afficher une feuille de calcul Excel sur plusieurs pages
viewOptions.renderOptions.spreadsheetOptions.paginateSheets = true;
viewOptions.renderOptions.spreadsheetOptions.countRowsPerPage = 45;
  • Afficher le quadrillage en HTML
viewOptions.renderOptions.spreadsheetOptions.renderGridLines = true;
  • Rendu des lignes et des colonnes vides
viewOptions.renderOptions.spreadsheetOptions.renderEmptyRows = true;
viewOptions.renderOptions.spreadsheetOptions.renderEmptyColumns = true;
  • Afficher les lignes et les colonnes masquées
viewOptions.renderOptions.spreadsheetOptions.renderHiddenColumns = true;
viewOptions.renderOptions.spreadsheetOptions.renderHiddenRows = true;
  • Rendre la zone d’impression uniquement
viewOptions.renderOptions.spreadsheetOptions.renderPrintAreaOnly = true;
  • Définir le mode de débordement de texte
viewOptions.renderOptions.spreadsheetOptions.textOverflowMode = "HideText";

Télécharger les pages HTML

L’exemple de code ci-dessus enregistrera la ou les pages HTML rendues sur le cloud. Il peut être téléchargé à l’aide de l’exemple de code suivant :

// Cet exemple de code montre comment télécharger une page HTML à partir du Cloud
// Initialiser l'API
var fileApi = groupdocs_viewer_cloud.FileApi.fromConfig(configuration);

// Créer une demande de téléchargement de fichier
let request = new groupdocs_viewer_cloud.DownloadFileRequest("/viewer/sample_xlsx/sample_page_1.html", myStorage);

// Télécharger un fichier
let response = await fileApi.downloadFile(request);

// Enregistrer le fichier image dans le répertoire de travail
fs.writeFile("C:\\Files\\viewer\\sample_xlsx\\sample_page_1.html", response, "binary", function (err) { });

Afficher des données Excel en HTML avec filigrane à l’aide de Node.js

Nous pouvons ajouter un texte en filigrane lors du rendu des données Excel sur les pages HTML par programmation en suivant les étapes ci-dessous :

  • Tout d’abord, créez une instance de ViewApi.
  • Ensuite, créez une instance de FileInfo.
  • Ensuite, définissez le chemin du fichier d’entrée.
  • Ensuite, créez une instance de ViewOptions.
  • Ensuite, attribuez FileInfo et définissez “HTML” comme viewFormat.
  • Ensuite, créez et attribuez une instance du filigrane.
  • Ensuite, définissez la taille et le texte du filigrane.
  • Après cela, créez une demande de vue en appelant la méthode CreateViewRequest avec viewOptions comme argument.
  • Enfin, appelez la méthode ViewApi.createView avec CreateViewRequest comme argument pour afficher le HTML.

L’exemple de code suivant montre comment afficher des données Excel au format HTML avec filigrane à l’aide d’une API REST dans Node.js.

// Cet exemple de code montre comment rendre Excel dans une page HTML avec Watermark
// Initialisation de l'API
let viewApi = groupdocs_viewer_cloud.ViewApi.fromKeys(clientId, clientSecret);

// Fichier d'entrée
let fileInfo = new groupdocs_viewer_cloud.FileInfo();
fileInfo.filePath = "sample.xlsx";

// Définir les options d'affichage
let viewOptions = new groupdocs_viewer_cloud.ViewOptions();
viewOptions.fileInfo = fileInfo;
viewOptions.viewFormat = groupdocs_viewer_cloud.ViewOptions.ViewFormatEnum.HTML;

// Ajouter un filigrane
viewOptions.watermark = new groupdocs_viewer_cloud.Watermark();
viewOptions.watermark.size = 100;
viewOptions.watermark.text = "This is a sample watermark!";

// Créer une demande de vue
let request = new groupdocs_viewer_cloud.CreateViewRequest(viewOptions);
// Créer une vue
let response = await viewApi.createView(request);

// Afficher le chemin des pages HTML rendues
for (let page = 0; page < response.pages.length; page++) {
  console.log("Document rendered: " + response.pages[page].path);
}
Afficher des données Excel en HTML avec filigrane à l'aide de Node.js

Afficher des données Excel en HTML avec filigrane à l’aide de Node.js

Essayez en ligne

Veuillez essayer l’outil de rendu Excel en ligne gratuit suivant, qui est développé à l’aide de l’API ci-dessus. https://products.groupdocs.app/viewer/xlsx

Conclusion

Dans cet article, nous avons appris à afficher des données Excel au format HTML sur le cloud. Nous avons également vu comment ajouter un filigrane aux pages HTML rendues à l’aide de Node.js. Cet article a également expliqué comment télécharger par programmation un fichier XLSX dans le cloud, puis télécharger le fichier HTML rendu à partir du cloud. En outre, vous pouvez en savoir plus sur l’API GroupDocs.Viewer Cloud à l’aide de la documentation. Nous fournissons également une section API Reference qui vous permet de visualiser et d’interagir avec nos API directement via le navigateur. En cas d’ambiguïté, n’hésitez pas à nous contacter sur le forum.

Voir également