Node.js の REST API を使用して Excel データを HTML で表示する

HTML Web ページは、ハンドヘルドデバイスで利用可能なブラウザで表示できます。 Excel データを HTML ページに表示すると、実際の Excel スプレッドシートを共有することなく、関係者にデータを示すことができます。そのため、必要な情報/データをどのブラウザでも簡単に表示できます。この記事では、Node.js の REST API を使用して Excel データを HTML で表示する方法を学びます。

この記事では次のトピックについて説明します。

Excel to HTML ビューアー REST API および Node.js SDK
Node.js の REST API を使用して Excel データを HTML で表示する
Node.js で Excel データをウォーターマーク付き HTML で表示する

Excel to HTML ビューアー REST API および Node.js SDK

XLS または XLSX スプレッドシートをレンダリングするには、GroupDocs.Viewer Cloud の Node.js SDK API を使用します。これを使用すると、あらゆる種類の一般的なドキュメントや画像ファイル形式をプログラムでレンダリングして表示できます。コンソールで次のコマンドを使用してインストールしてください。

npm install groupdocs-conversion-cloud

上記の手順に従う前に、ダッシュボードからクライアント ID とシークレットを取得してください。 ID とシークレットを取得したら、以下に示すようにコードを追加します。

// ダッシュボードからクライアント ID とシークレットを取得し、以下に示すコードを追加してください。
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";

Node.js の REST API を使用して Excel データを HTML で表示する

以下に示す簡単な手順に従って、Excel データを HTML で表示できます。

XLSXファイルをクラウドにアップロード
Node.jsを使用してExcelデータをHTMLで表示する
ダウンロードレンダリングされたファイル

ドキュメントをアップロードする

まず、以下のコード例を使用して、XLSX ファイルをクラウドにアップロードします。

// このコード例は、XLSX ファイルをクラウドにアップロードする方法を示しています。
// FileApi を構築する
let fileApi = groupdocs_viewer_cloud.FileApi.fromConfig(configuration);
let resourcesFolder = 'C:\\Files\\viewer\\sample.xlsx';

// ファイルを 1 つずつ読み込む
fs.readFile(resourcesFolder, (err, fileStream) => {
  // アップロードファイルリクエストの作成
  let request = new groupdocs_viewer_cloud.UploadFileRequest("sample.xlsx", fileStream, myStorage);
  // ファイルをアップロードする
  fileApi.uploadFile(request);
});

その結果、アップロードされたファイルはクラウド上のダッシュボードのファイルセクションで利用できるようになります。

Node.jsを使用してExcelデータをHTMLで表示する

以下の手順に従って、プログラムで HTML ページ上に Excel データをレンダリングまたは表示できます。

まず、ViewApiのインスタンスを作成します。
次に、FileInfo のインスタンスを作成します。
次に、入力ファイルのパスを設定します。
次に、ViewOptions のインスタンスを作成します。
次に、FileInfoを割り当て、viewFormatとして「HTML」を設定します。
次に、HtmlOptions のインスタンスを作成します。
次に、SpreadsheetOptions を開始して割り当てます。
次に、paginateSheets、textOverflowMode、renderGridLines などのさまざまなオプションを設定します。
その後、viewOptions を引数として CreateViewRequest メソッドを呼び出して、ビューリクエストを作成します。
最後に、CreateViewRequest を引数として ViewApi.createView メソッドを呼び出し、HTML をレンダリングします。

次のコードサンプルは、Node.js の REST API を使用して Excel データを HTML で表示する方法を示しています。

// このコード例は、HTML ページで Excel をレンダリングする方法を示しています。
// 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);
}

デフォルトでは、1 つのワークシートが 1 ページにレンダリングされます。次のオプションを適用することで、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) { });

Node.jsを使用してExcelデータをウォーターマーク付きのHTMLで表示する

以下の手順に従って、プログラムで Excel データを HTML ページにレンダリングするときに透かしテキストを追加できます。

まず、ViewApiのインスタンスを作成します。
次に、FileInfo のインスタンスを作成します。
次に、入力ファイルのパスを設定します。
次に、ViewOptions のインスタンスを作成します。
次に、FileInfoを割り当て、viewFormatとして「HTML」を設定します。
次に、ウォーターマークのインスタンスを作成して割り当てます。
次に、ウォーターマークのサイズとテキストを設定します。
その後、viewOptions を引数として CreateViewRequest メソッドを呼び出して、ビューリクエストを作成します。
最後に、CreateViewRequest を引数として ViewApi.createView メソッドを呼び出し、HTML をレンダリングします。

次のコードサンプルは、Node.js の REST API を使用して、透かし付きの HTML データを HTML で表示する方法を示しています。

// このコード例は、ウォーターマークを使用して HTML ページで Excel をレンダリングする方法を示します。
// 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);
}

Node.jsを使用してExcelデータをウォーターマーク付きのHTMLで表示する

オンラインで試す

上記の API を使用して開発された、次の無料のオンライン Excel レンダリングツールをお試しください。 https://products.groupdocs.app/viewer/xlsx

結論

この記事では、Excel データをクラウド上で HTML として表示する方法を学びました。 Node.js を使用して、レンダリングされた HTML ページにウォーターマークを追加する方法についても説明しました。この記事では、プログラムで XLSX ファイルをクラウドにアップロードし、レンダリングされた HTML ファイルをクラウドからダウンロードする方法についても説明しました。さらに、GroupDocs.Viewer Cloud API の詳細については、ドキュメントを使用して学習できます。また、ブラウザーを通じて直接 API を視覚化し操作できるようにする API リファレンスセクションも提供しています。不明な点がある場合は、フォーラムでお気軽にお問い合わせください。

Excel to HTML ビューアー REST API および Node.js SDK#

Node.js の REST API を使用して Excel データを HTML で表示する#

ドキュメントをアップロードする#

Node.jsを使用してExcelデータをHTMLで表示する#

HTMLページをダウンロードする#

Node.jsを使用してExcelデータをウォーターマーク付きのHTMLで表示する#

オンラインで試す#

結論#

関連項目#

Excel to HTML ビューアー REST API および Node.js SDK

Node.js の REST API を使用して Excel データを HTML で表示する

ドキュメントをアップロードする

Node.jsを使用してExcelデータをHTMLで表示する

HTMLページをダウンロードする

Node.jsを使用してExcelデータをウォーターマーク付きのHTMLで表示する

オンラインで試す

結論

関連項目