Zeigen Sie Excel-Daten in HTML mithilfe der REST-API in Node.js an

HTML Webseiten können in jedem auf Handheld-Geräten verfügbaren Browser angezeigt werden. Durch die Anzeige von Excel-Daten auf HTML-Seiten können Daten den relevanten Stakeholdern angezeigt werden, ohne dass die tatsächliche Excel-Tabelle mit ihnen geteilt werden muss. So konnten sie die erforderlichen Informationen/Daten problemlos in jedem Browser anzeigen. In diesem Artikel erfahren Sie, wie Sie Excel-Daten mithilfe einer REST-API in Node.js in HTML anzeigen.

Die folgenden Themen sollen in diesem Artikel behandelt werden:

Excel to HTML Viewer REST API und Node.js SDK

Zum Rendern von XLS oder XLSX-Tabellen verwende ich die Node.js SDK of GroupDocs.Viewer Cloud API. Es ermöglicht das programmgesteuerte Rendern und Anzeigen aller Arten gängiger Dokumente und Bilddateiformate. Bitte installieren Sie es mit dem folgenden Befehl in der Konsole:

npm install groupdocs-conversion-cloud

Bitte holen Sie sich Ihre Kunden-ID und Ihr Geheimnis aus dem Dashboard, bevor Sie die genannten Schritte ausführen. Sobald Sie Ihre ID und Ihr Geheimnis haben, fügen Sie den Code wie unten gezeigt ein:

// Bitte rufen Sie Ihre Kunden-ID und Ihr Geheimnis aus dem Dashboard ab und fügen Sie den Code wie unten gezeigt ein:
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";

Zeigen Sie Excel-Daten in HTML mithilfe der REST-API in Node.js an

Wir können Excel-Daten in HTML anzeigen, indem wir die folgenden einfachen Schritte ausführen:

  1. Hochladen der XLSX-Datei in die Cloud
  2. Excel-Daten in HTML mit Node.js anzeigen
  3. Herunterladen der gerenderten Datei

Laden Sie das Dokument hoch

Zunächst laden wir die XLSX-Datei mithilfe des unten angegebenen Codebeispiels in die Cloud hoch:

// Dieses Codebeispiel zeigt, wie eine XLSX-Datei in die Cloud hochgeladen wird
// Konstruieren Sie FileApi
let fileApi = groupdocs_viewer_cloud.FileApi.fromConfig(configuration);
let resourcesFolder = 'C:\\Files\\viewer\\sample.xlsx';

// Lesen Sie die Dateien einzeln
fs.readFile(resourcesFolder, (err, fileStream) => {
  // Erstellen Sie eine Anfrage zum Hochladen einer Datei
  let request = new groupdocs_viewer_cloud.UploadFileRequest("sample.xlsx", fileStream, myStorage);
  // Datei hochladen
  fileApi.uploadFile(request);
});

Dadurch ist die hochgeladene Datei im Dateienbereich des Dashboards in der Cloud verfügbar.

Zeigen Sie Excel-Daten in HTML mit Node.js an

Wir können Excel-Daten programmgesteuert auf HTML-Seiten rendern oder anzeigen, indem wir die folgenden Schritte ausführen:

  • Erstellen Sie zunächst eine Instanz von ViewApi.
  • Erstellen Sie als Nächstes eine Instanz von FileInfo.
  • Legen Sie dann den Pfad der Eingabedatei fest.
  • Erstellen Sie als Nächstes eine Instanz von ViewOptions.
  • Weisen Sie dann die FileInfo zu und legen Sie „HTML“ als Ansichtsformat fest.
  • Erstellen Sie als Nächstes eine Instanz von HtmlOptions.
  • Dann initiieren und weisen Sie die SpreadsheetOptions zu.
  • Als nächstes legen Sie verschiedene Optionen wie paginateSheets, textOverflowMode, renderGridLines usw. fest.
  • Erstellen Sie anschließend eine Ansichtsanforderung, indem Sie die Methode „CreateViewRequest“ mit „viewOptions“ als Argument aufrufen.
  • Rufen Sie abschließend die Methode ViewApi.createView mit CreateViewRequest als Argument auf, um HTML zu rendern.

Das folgende Codebeispiel zeigt, wie Excel-Daten mithilfe einer REST-API in Node.js in HTML angezeigt werden.

// Dieses Codebeispiel zeigt, wie Excel in einer HTML-Seite gerendert wird
// API-Initialisierung
let viewApi = groupdocs_viewer_cloud.ViewApi.fromKeys(clientId, clientSecret);

// Eingabedatei
let fileInfo = new groupdocs_viewer_cloud.FileInfo();
fileInfo.filePath = "sample.xlsx";

// Ansichtsoptionen definieren
let viewOptions = new groupdocs_viewer_cloud.ViewOptions();
viewOptions.fileInfo = fileInfo;
viewOptions.viewFormat = groupdocs_viewer_cloud.ViewOptions.ViewFormatEnum.HTML;

// Definieren Sie Renderoptionen
viewOptions.renderOptions = new groupdocs_viewer_cloud.HtmlOptions();

// Definieren Sie Optionen für das Rendern von Tabellenkalkulationen
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;

// Ansichtsanfrage erstellen
let request = new groupdocs_viewer_cloud.CreateViewRequest(viewOptions);
// Ansicht erstellen
let response = await viewApi.createView(request);

// Zeigt den Pfad der gerenderten HTML-Seiten an
for (let page = 0; page < response.pages.length; page++) {
  console.log("Document rendered: " + response.pages[page].path);
}
Zeigen Sie Excel-Daten in HTML mit Node.js an

Zeigen Sie Excel-Daten in HTML mit Node.js an

Standardmäßig wird ein Arbeitsblatt auf einer Seite gerendert. Wir können die Darstellung von Excel anpassen, indem wir die folgenden Optionen anwenden:

  • Zeigen Sie Excel-Arbeitsblätter auf mehreren Seiten an
viewOptions.renderOptions.spreadsheetOptions.paginateSheets = true;
viewOptions.renderOptions.spreadsheetOptions.countRowsPerPage = 45;
  • Gitterlinien in HTML anzeigen
viewOptions.renderOptions.spreadsheetOptions.renderGridLines = true;
  • Leere Zeilen und Spalten rendern
viewOptions.renderOptions.spreadsheetOptions.renderEmptyRows = true;
viewOptions.renderOptions.spreadsheetOptions.renderEmptyColumns = true;
  • Versteckte Zeilen und Spalten anzeigen
viewOptions.renderOptions.spreadsheetOptions.renderHiddenColumns = true;
viewOptions.renderOptions.spreadsheetOptions.renderHiddenRows = true;
  • Nur Druckbereich rendern
viewOptions.renderOptions.spreadsheetOptions.renderPrintAreaOnly = true;
  • Legen Sie den Textüberlaufmodus fest
viewOptions.renderOptions.spreadsheetOptions.textOverflowMode = "HideText";

Laden Sie HTML-Seiten herunter

Das obige Codebeispiel speichert die gerenderten HTML-Seite(n) in der Cloud. Es kann mit dem folgenden Codebeispiel heruntergeladen werden:

// Dieses Codebeispiel zeigt, wie eine HTML-Seite aus der Cloud heruntergeladen wird
// API initialisieren
var fileApi = groupdocs_viewer_cloud.FileApi.fromConfig(configuration);

// Datei-Download-Anfrage erstellen
let request = new groupdocs_viewer_cloud.DownloadFileRequest("/viewer/sample_xlsx/sample_page_1.html", myStorage);

// Download-Datei
let response = await fileApi.downloadFile(request);

// Bilddatei im Arbeitsverzeichnis speichern
fs.writeFile("C:\\Files\\viewer\\sample_xlsx\\sample_page_1.html", response, "binary", function (err) { });

Zeigen Sie Excel-Daten in HTML mit Wasserzeichen mithilfe von Node.js an

Wir können beim programmgesteuerten Rendern von Excel-Daten auf HTML-Seiten einen Wasserzeichentext hinzufügen, indem wir die folgenden Schritte ausführen:

  • Erstellen Sie zunächst eine Instanz von ViewApi.
  • Erstellen Sie als Nächstes eine Instanz von FileInfo.
  • Legen Sie dann den Pfad der Eingabedatei fest.
  • Erstellen Sie als Nächstes eine Instanz von ViewOptions.
  • Weisen Sie dann die FileInfo zu und legen Sie „HTML“ als Ansichtsformat fest.
  • Als nächstes erstellen und weisen Sie eine Instanz des Wasserzeichens zu.
  • Legen Sie dann die Größe und den Text des Wasserzeichens fest.
  • Erstellen Sie anschließend eine Ansichtsanforderung, indem Sie die Methode „CreateViewRequest“ mit „viewOptions“ als Argument aufrufen.
  • Rufen Sie abschließend die Methode ViewApi.createView mit CreateViewRequest als Argument auf, um HTML zu rendern.

Das folgende Codebeispiel zeigt, wie Excel-Daten in HTML mit Wasserzeichen mithilfe einer REST-API in Node.js angezeigt werden.

// Dieses Codebeispiel zeigt, wie Excel mit Wasserzeichen in einer HTML-Seite gerendert wird
// API-Initialisierung
let viewApi = groupdocs_viewer_cloud.ViewApi.fromKeys(clientId, clientSecret);

// Eingabedatei
let fileInfo = new groupdocs_viewer_cloud.FileInfo();
fileInfo.filePath = "sample.xlsx";

// Ansichtsoptionen definieren
let viewOptions = new groupdocs_viewer_cloud.ViewOptions();
viewOptions.fileInfo = fileInfo;
viewOptions.viewFormat = groupdocs_viewer_cloud.ViewOptions.ViewFormatEnum.HTML;

// Wasserzeichen hinzufügen
viewOptions.watermark = new groupdocs_viewer_cloud.Watermark();
viewOptions.watermark.size = 100;
viewOptions.watermark.text = "This is a sample watermark!";

// Ansichtsanfrage erstellen
let request = new groupdocs_viewer_cloud.CreateViewRequest(viewOptions);
// Ansicht erstellen
let response = await viewApi.createView(request);

// Zeigt den Pfad der gerenderten HTML-Seiten an
for (let page = 0; page < response.pages.length; page++) {
  console.log("Document rendered: " + response.pages[page].path);
}
Zeigen Sie Excel-Daten in HTML mit Wasserzeichen mithilfe von Node.js an

Zeigen Sie Excel-Daten in HTML mit Wasserzeichen mithilfe von Node.js an

Versuchen Sie es online

Bitte probieren Sie das folgende kostenlose Online-Excel-Rendering-Tool aus, das mit der oben genannten API entwickelt wurde. https://products.groupdocs.app/viewer/xlsx

Abschluss

In diesem Artikel haben wir gelernt, wie man Excel-Daten als HTML in der Cloud anzeigt. Wir haben auch gesehen, wie man mit Node.js Wasserzeichen zu gerenderten HTML-Seiten hinzufügt. In diesem Artikel wurde auch erläutert, wie Sie eine XLSX-Datei programmgesteuert in die Cloud hochladen und dann die gerenderte HTML-Datei aus der Cloud herunterladen. Außerdem können Sie mithilfe der Dokumentation mehr über die GroupDocs.Viewer Cloud API erfahren. Wir bieten auch einen Abschnitt API-Referenz an, mit dem Sie unsere APIs direkt über den Browser visualisieren und mit ihnen interagieren können. Bei Unklarheiten können Sie uns gerne im Forum kontaktieren.

Siehe auch