Strony HTML można przeglądać w dowolnej przeglądarce dostępnej na urządzeniach przenośnych. Wyświetlanie danych programu Excel na stronach HTML pomaga wyświetlać dane odpowiednim interesariuszom bez udostępniania im rzeczywistego arkusza kalkulacyjnego programu Excel. Dzięki temu mogli łatwo przeglądać wymagane informacje/dane w dowolnej przeglądarce. W tym artykule dowiemy się, jak wyświetlić dane Excela w HTML za pomocą REST API w Node.js.
W tym artykule zostaną omówione następujące tematy:
- Excel do HTML Viewer REST API i Node.js SDK
- Wyświetlaj dane Excela w HTML przy użyciu REST API w Node.js
- Wyświetlaj dane Excela w formacie HTML ze znakiem wodnym w Node.js
Excel do HTML Viewer REST API i Node.js SDK
Do renderowania arkuszy kalkulacyjnych XLS lub XLSX będę używał Node.js SDK of GroupDocs.Viewer Cloud API. Umożliwia programowe renderowanie i przeglądanie wszelkiego rodzaju popularnych dokumentów i formatów plików graficznych. Zainstaluj go za pomocą następującego polecenia w konsoli:
npm install groupdocs-conversion-cloud
Proszę pobierz swój identyfikator klienta i klucz tajny z pulpitu nawigacyjnego przed wykonaniem wspomnianych kroków. Po uzyskaniu identyfikatora i tajnego kodu dodaj kod, jak pokazano poniżej:
// Uzyskaj swój identyfikator klienta i klucz tajny z pulpitu nawigacyjnego i dodaj kod, jak pokazano poniżej:
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";
Wyświetlaj dane Excela w HTML przy użyciu REST API w Node.js
Możemy wyświetlać dane programu Excel w formacie HTML, wykonując proste czynności podane poniżej:
- Prześlij plik XLSX do chmury
- Wyświetl dane Excela w HTML za pomocą Node.js
- Pobierz wyrenderowany plik
Prześlij dokument
Najpierw prześlemy plik XLSX do chmury, korzystając z przykładowego kodu podanego poniżej:
// Ten przykład kodu pokazuje, jak przesłać plik XLSX do chmury
// Skonstruuj FileApi
let fileApi = groupdocs_viewer_cloud.FileApi.fromConfig(configuration);
let resourcesFolder = 'C:\\Files\\viewer\\sample.xlsx';
// Czytaj pliki jeden po drugim
fs.readFile(resourcesFolder, (err, fileStream) => {
// Utwórz prośbę o przesłanie pliku
let request = new groupdocs_viewer_cloud.UploadFileRequest("sample.xlsx", fileStream, myStorage);
// Przesyłanie pliku
fileApi.uploadFile(request);
});
W rezultacie przesłany plik będzie dostępny w sekcji plików pulpitu nawigacyjnego w chmurze.
Wyświetl dane programu Excel w formacie HTML za pomocą Node.js
Możemy programowo renderować lub wyświetlać dane programu Excel na stronach HTML, wykonując poniższe czynności:
- Najpierw utwórz instancję ViewApi.
- Następnie utwórz instancję klasy FileInfo.
- Następnie ustaw ścieżkę pliku wejściowego.
- Następnie utwórz instancję ViewOptions.
- Następnie przypisz FileInfo i ustaw „HTML” jako viewFormat.
- Następnie utwórz wystąpienie HtmlOptions.
- Następnie zainicjuj i przypisz SpreadsheetOptions.
- Następnie ustaw różne opcje, takie jak paginateSheets, textOverflowMode, renderGridLines itp.
- Następnie utwórz żądanie wyświetlenia, wywołując metodę CreateViewRequest z argumentem viewOptions.
- Na koniec wywołaj metodę ViewApi.createView z argumentem CreateViewRequest do renderowania kodu HTML.
Poniższy przykładowy kod pokazuje, jak wyświetlić dane programu Excel w formacie HTML przy użyciu interfejsu API REST w Node.js.
// Ten przykład kodu pokazuje, jak renderować program Excel na stronie HTML
// Inicjalizacja interfejsu API
let viewApi = groupdocs_viewer_cloud.ViewApi.fromKeys(clientId, clientSecret);
// Plik wejściowy
let fileInfo = new groupdocs_viewer_cloud.FileInfo();
fileInfo.filePath = "sample.xlsx";
// Zdefiniuj opcje widoku
let viewOptions = new groupdocs_viewer_cloud.ViewOptions();
viewOptions.fileInfo = fileInfo;
viewOptions.viewFormat = groupdocs_viewer_cloud.ViewOptions.ViewFormatEnum.HTML;
// Zdefiniuj opcje renderowania
viewOptions.renderOptions = new groupdocs_viewer_cloud.HtmlOptions();
// Zdefiniuj opcje renderowania arkusza kalkulacyjnego
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;
// Utwórz żądanie wyświetlenia
let request = new groupdocs_viewer_cloud.CreateViewRequest(viewOptions);
// Utwórz widok
let response = await viewApi.createView(request);
// Wyświetl ścieżkę renderowanych stron HTML
for (let page = 0; page < response.pages.length; page++) {
console.log("Document rendered: " + response.pages[page].path);
}
Wyświetl dane programu Excel w formacie HTML za pomocą Node.js
Domyślnie jeden arkusz roboczy jest renderowany na jednej stronie. Możemy dostosować renderowanie programu Excel, stosując następujące opcje:
- Wyświetl arkusze programu Excel na wielu stronach
viewOptions.renderOptions.spreadsheetOptions.paginateSheets = true;
viewOptions.renderOptions.spreadsheetOptions.countRowsPerPage = 45;
- Pokaż linie siatki w HTML
viewOptions.renderOptions.spreadsheetOptions.renderGridLines = true;
- Renderuj puste wiersze i kolumny
viewOptions.renderOptions.spreadsheetOptions.renderEmptyRows = true;
viewOptions.renderOptions.spreadsheetOptions.renderEmptyColumns = true;
- Pokaż ukryte wiersze i kolumny
viewOptions.renderOptions.spreadsheetOptions.renderHiddenColumns = true;
viewOptions.renderOptions.spreadsheetOptions.renderHiddenRows = true;
- Renderuj tylko obszar wydruku
viewOptions.renderOptions.spreadsheetOptions.renderPrintAreaOnly = true;
- Ustaw tryb przepełnienia tekstu
viewOptions.renderOptions.spreadsheetOptions.textOverflowMode = "HideText";
Pobierz strony HTML
Powyższy przykładowy kod zapisze wyrenderowane strony HTML w chmurze. Można go pobrać, korzystając z następującego przykładowego kodu:
// Ten przykładowy kod pokazuje, jak pobrać stronę HTML z chmury
// Zainicjuj interfejs API
var fileApi = groupdocs_viewer_cloud.FileApi.fromConfig(configuration);
// Utwórz żądanie pobrania pliku
let request = new groupdocs_viewer_cloud.DownloadFileRequest("/viewer/sample_xlsx/sample_page_1.html", myStorage);
// Pobieranie pliku
let response = await fileApi.downloadFile(request);
// Zapisz plik obrazu w katalogu roboczym
fs.writeFile("C:\\Files\\viewer\\sample_xlsx\\sample_page_1.html", response, "binary", function (err) { });
Wyświetl dane programu Excel w formacie HTML ze znakiem wodnym za pomocą Node.js
Możemy dodać tekst znaku wodnego podczas programowego renderowania danych programu Excel na stronach HTML, wykonując czynności podane poniżej:
- Najpierw utwórz instancję ViewApi.
- Następnie utwórz instancję klasy FileInfo.
- Następnie ustaw ścieżkę pliku wejściowego.
- Następnie utwórz instancję ViewOptions.
- Następnie przypisz FileInfo i ustaw „HTML” jako viewFormat.
- Następnie utwórz i przypisz wystąpienie znaku wodnego.
- Następnie ustaw rozmiar i tekst znaku wodnego.
- Następnie utwórz żądanie wyświetlenia, wywołując metodę CreateViewRequest z argumentem viewOptions.
- Na koniec wywołaj metodę ViewApi.createView z argumentem CreateViewRequest do renderowania kodu HTML.
Poniższy przykładowy kod pokazuje, jak wyświetlić dane programu Excel w formacie HTML ze znakiem wodnym przy użyciu interfejsu API REST w Node.js.
// Ten przykład kodu pokazuje, jak renderować program Excel na stronie HTML ze znakiem wodnym
// Inicjalizacja interfejsu API
let viewApi = groupdocs_viewer_cloud.ViewApi.fromKeys(clientId, clientSecret);
// Plik wejściowy
let fileInfo = new groupdocs_viewer_cloud.FileInfo();
fileInfo.filePath = "sample.xlsx";
// Zdefiniuj opcje widoku
let viewOptions = new groupdocs_viewer_cloud.ViewOptions();
viewOptions.fileInfo = fileInfo;
viewOptions.viewFormat = groupdocs_viewer_cloud.ViewOptions.ViewFormatEnum.HTML;
// Dodaj znak wodny
viewOptions.watermark = new groupdocs_viewer_cloud.Watermark();
viewOptions.watermark.size = 100;
viewOptions.watermark.text = "This is a sample watermark!";
// Utwórz żądanie wyświetlenia
let request = new groupdocs_viewer_cloud.CreateViewRequest(viewOptions);
// Utwórz widok
let response = await viewApi.createView(request);
// Wyświetl ścieżkę renderowanych stron HTML
for (let page = 0; page < response.pages.length; page++) {
console.log("Document rendered: " + response.pages[page].path);
}
Wyświetl dane programu Excel w formacie HTML ze znakiem wodnym za pomocą Node.js
Wypróbuj online
Wypróbuj następujące bezpłatne narzędzie do renderowania programu Excel online, które zostało opracowane przy użyciu powyższego interfejsu API. https://products.groupdocs.app/viewer/xlsx
Wniosek
W tym artykule nauczyliśmy się, jak wyświetlać dane Excela jako HTML w chmurze. Widzieliśmy również, jak dodać znak wodny do renderowanych stron HTML za pomocą Node.js. W tym artykule wyjaśniono również, jak programowo przesłać plik XLSX do chmury, a następnie pobrać wyrenderowany plik HTML z chmury. Poza tym możesz dowiedzieć się więcej o GroupDocs.Viewer Cloud API korzystając z dokumentacji. Udostępniamy również sekcję Informacje o interfejsach API, która umożliwia wizualizację naszych interfejsów API i interakcję z nimi bezpośrednio w przeglądarce. W przypadku jakichkolwiek niejasności prosimy o kontakt na forum.