Відображення даних Excel у HTML за допомогою REST API у Node.js

HTML веб-сторінки можна переглядати в будь-якому браузері, доступному на портативних пристроях. Відображення даних Excel на сторінках HTML допомагає показувати дані відповідним зацікавленим сторонам, не передаючи їм фактичну електронну таблицю Excel. Таким чином, вони могли легко переглядати необхідну інформацію/дані в будь-якому браузері. У цій статті ми дізнаємося, як відображати дані Excel у HTML за допомогою REST API у Node.js.

У цій статті будуть розглянуті такі теми:

Excel to HTML Viewer REST API та Node.js SDK

Для візуалізації електронних таблиць XLS або XLSX я буду використовувати API Node.js SDK of GroupDocs.Viewer Cloud. Це дозволяє програмно відтворювати та переглядати всілякі популярні документи та формати файлів зображень. Встановіть його за допомогою такої команди в консолі:

npm install groupdocs-conversion-cloud

Будь ласка, отримайте свій ідентифікатор клієнта та секрет на інформаційній панелі, перш ніж виконувати вказані дії. Отримавши ідентифікатор і секрет, додайте код, як показано нижче:

// Отримайте свій ідентифікатор клієнта та секрет із інформаційної панелі та додайте код, як показано нижче:
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";

Відображення даних Excel у HTML за допомогою REST API у Node.js

Ми можемо відобразити дані Excel у форматі HTML, виконавши прості дії, наведені нижче:

  1. Завантажте файл XLSX у хмару
  2. Відображення даних Excel у HTML за допомогою Node.js
  3. Завантажити відтворений файл

Завантажте документ

По-перше, ми завантажимо файл XLSX у хмару за допомогою наведеного нижче прикладу коду:

// Цей приклад коду демонструє, як завантажити файл XLSX у хмару
// Побудуйте FileApi
let fileApi = groupdocs_viewer_cloud.FileApi.fromConfig(configuration);
let resourcesFolder = 'C:\\Files\\viewer\\sample.xlsx';

// Читайте файли один за одним
fs.readFile(resourcesFolder, (err, fileStream) => {
  // Створити запит на завантаження файлу
  let request = new groupdocs_viewer_cloud.UploadFileRequest("sample.xlsx", fileStream, myStorage);
  // Завантажити файл
  fileApi.uploadFile(request);
});

У результаті завантажений файл буде доступний у розділі файлів інформаційної панелі в хмарі.

Відображення даних Excel у HTML за допомогою Node.js

Ми можемо програмно відобразити або відобразити дані Excel на сторінках HTML, виконавши наведені нижче дії.

  • По-перше, створіть екземпляр ViewApi.
  • Далі створіть екземпляр FileInfo.
  • Потім встановіть шлях до вхідного файлу.
  • Далі створіть екземпляр ViewOptions.
  • Потім призначте FileInfo та встановіть «HTML» як viewFormat.
  • Далі створіть екземпляр HtmlOptions.
  • Потім запустіть і призначте параметри електронної таблиці.
  • Далі встановіть різні параметри, такі як paginateSheets, textOverflowMode, renderGridLines тощо.
  • Після цього створіть запит на перегляд, викликавши метод CreateViewRequest з аргументом viewOptions.
  • Нарешті, викличте метод ViewApi.createView із CreateViewRequest як аргументом для відтворення HTML.

У наведеному нижче прикладі коду показано, як відображати дані Excel у HTML за допомогою REST API у Node.js.

// Цей приклад коду демонструє, як відобразити Excel на сторінці HTML
// Ініціалізація API
let viewApi = groupdocs_viewer_cloud.ViewApi.fromKeys(clientId, clientSecret);

// Вхідний файл
let fileInfo = new groupdocs_viewer_cloud.FileInfo();
fileInfo.filePath = "sample.xlsx";

// Визначте параметри перегляду
let viewOptions = new groupdocs_viewer_cloud.ViewOptions();
viewOptions.fileInfo = fileInfo;
viewOptions.viewFormat = groupdocs_viewer_cloud.ViewOptions.ViewFormatEnum.HTML;

// Визначте параметри візуалізації
viewOptions.renderOptions = new groupdocs_viewer_cloud.HtmlOptions();

// Визначте параметри візуалізації електронної таблиці
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;

// Створити запит на перегляд
let request = new groupdocs_viewer_cloud.CreateViewRequest(viewOptions);
// Створити перегляд
let response = await viewApi.createView(request);

// Відображати шлях відтворених HTML-сторінок
for (let page = 0; page < response.pages.length; page++) {
  console.log("Document rendered: " + response.pages[page].path);
}
Відображення даних Excel у HTML за допомогою Node.js

Відображення даних Excel у HTML за допомогою Node.js

За замовчуванням один робочий аркуш відображається на одній сторінці. Ми можемо налаштувати візуалізацію Excel, застосувавши такі параметри:

  • Відображення робочих аркушів Excel на кількох сторінках
viewOptions.renderOptions.spreadsheetOptions.paginateSheets = true;
viewOptions.renderOptions.spreadsheetOptions.countRowsPerPage = 45;
  • Показати лінії сітки в HTML
viewOptions.renderOptions.spreadsheetOptions.renderGridLines = true;
  • Відобразити порожні рядки та стовпці
viewOptions.renderOptions.spreadsheetOptions.renderEmptyRows = true;
viewOptions.renderOptions.spreadsheetOptions.renderEmptyColumns = true;
  • Показати приховані рядки та стовпці
viewOptions.renderOptions.spreadsheetOptions.renderHiddenColumns = true;
viewOptions.renderOptions.spreadsheetOptions.renderHiddenRows = true;
  • Відобразити лише область друку
viewOptions.renderOptions.spreadsheetOptions.renderPrintAreaOnly = true;
  • Встановити режим переповнення тексту
viewOptions.renderOptions.spreadsheetOptions.textOverflowMode = "HideText";

Завантажити HTML-сторінки

Наведений вище зразок коду збереже відтворені сторінки HTML у хмарі. Його можна завантажити за допомогою такого прикладу коду:

// Цей приклад коду демонструє, як завантажити HTML-сторінку з хмари
// Ініціалізація api
var fileApi = groupdocs_viewer_cloud.FileApi.fromConfig(configuration);

// Створити запит на завантаження файлу
let request = new groupdocs_viewer_cloud.DownloadFileRequest("/viewer/sample_xlsx/sample_page_1.html", myStorage);

// Завантажити файл
let response = await fileApi.downloadFile(request);

// Збережіть файл зображення в робочому каталозі
fs.writeFile("C:\\Files\\viewer\\sample_xlsx\\sample_page_1.html", response, "binary", function (err) { });

Відображення даних Excel у HTML із водяним знаком за допомогою Node.js

Ми можемо додати текст водяного знака під час програмного відтворення даних Excel на сторінках HTML, виконавши наведені нижче дії.

  • По-перше, створіть екземпляр ViewApi.
  • Далі створіть екземпляр FileInfo.
  • Потім встановіть шлях до вхідного файлу.
  • Далі створіть екземпляр ViewOptions.
  • Потім призначте FileInfo та встановіть «HTML» як viewFormat.
  • Далі створіть і призначте екземпляр водяного знака.
  • Потім встановіть розмір водяного знака та текст.
  • Після цього створіть запит на перегляд, викликавши метод CreateViewRequest із параметрами viewOptions як аргументом.
  • Нарешті, викличте метод ViewApi.createView із CreateViewRequest як аргументом для відтворення HTML.

У наведеному нижче прикладі коду показано, як відображати дані Excel у HTML із водяним знаком за допомогою REST API у Node.js.

// Цей приклад коду демонструє, як відобразити Excel на сторінці HTML із водяним знаком
// Ініціалізація API
let viewApi = groupdocs_viewer_cloud.ViewApi.fromKeys(clientId, clientSecret);

// Вхідний файл
let fileInfo = new groupdocs_viewer_cloud.FileInfo();
fileInfo.filePath = "sample.xlsx";

// Визначте параметри перегляду
let viewOptions = new groupdocs_viewer_cloud.ViewOptions();
viewOptions.fileInfo = fileInfo;
viewOptions.viewFormat = groupdocs_viewer_cloud.ViewOptions.ViewFormatEnum.HTML;

// Додати водяний знак
viewOptions.watermark = new groupdocs_viewer_cloud.Watermark();
viewOptions.watermark.size = 100;
viewOptions.watermark.text = "This is a sample watermark!";

// Створити запит на перегляд
let request = new groupdocs_viewer_cloud.CreateViewRequest(viewOptions);
// Створити перегляд
let response = await viewApi.createView(request);

// Відображати шлях відтворених HTML-сторінок
for (let page = 0; page < response.pages.length; page++) {
  console.log("Document rendered: " + response.pages[page].path);
}
Відображення даних Excel у HTML із водяним знаком за допомогою Node.js

Відображення даних Excel у HTML із водяним знаком за допомогою Node.js

Спробуйте онлайн

Будь ласка, спробуйте наведений нижче безкоштовний онлайн-інструмент візуалізації Excel, розроблений за допомогою вищезазначеного API. https://products.groupdocs.app/viewer/xlsx

Висновок

У цій статті ми дізналися, як відображати дані Excel як HTML у хмарі. Ми також бачили, як додати водяний знак до відтворених HTML-сторінок за допомогою Node.js. У цій статті також пояснюється, як програмним шляхом завантажити файл XLSX у хмару, а потім завантажити відрендерений файл HTML із хмари. Крім того, ви можете дізнатися більше про GroupDocs.Viewer Cloud API за допомогою документації. Ми також надаємо розділ API Reference, який дозволяє візуалізувати наші API та взаємодіяти з ними безпосередньо через браузер. У разі будь-яких неясностей зв’яжіться з нами на форумі.

Дивись також