Отображение данных Excel в HTML с использованием REST API в Node.js

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

В этой статье должны быть раскрыты следующие темы:

REST API средства просмотра Excel в HTML и Node.js SDK

Для рендеринга электронных таблиц XLS или XLSX я буду использовать Node.js SDK для GroupDocs.Viewer Cloud API. Он позволяет программно отображать и просматривать все виды популярных документов и форматов файлов изображений. Пожалуйста, установите его с помощью следующей команды в консоли:

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» в качестве формата представления.
  • Затем создайте экземпляр HtmlOptions.
  • Затем инициируйте и назначьте файл SpreadsheetOptions.
  • Затем установите различные параметры, такие как 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» в качестве формата представления.
  • Затем создайте и назначьте экземпляр водяного знака.
  • Затем установите размер водяного знака и текст.
  • После этого создайте запрос на просмотр, вызвав метод 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-файл из облака. Кроме того, вы можете узнать больше об облачном API GroupDocs.Viewer, воспользовавшись документацией. Мы также предоставляем раздел Справочник по API, который позволяет визуализировать наши API и взаимодействовать с ними непосредственно через браузер. В случае возникновения каких-либо неясностей, пожалуйста, свяжитесь с нами на форуме.

Смотрите также