[{"id":"7720ca38-fc98-4fd8-a3a5-3c0e730c3c72","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"247ded67-b050-4436-be40-fe7b0eeabef7","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"9a8c377f-1f1e-476e-b487-c2339da9bed3","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"5e8e6db2-89b9-4184-bbdc-301ee676869e","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"e04b598e-b0d8-4054-bdac-5143d90b3d51","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"edb028d0-a8cc-42b2-acda-42a5515729f0","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"2adde444-20a6-43d7-8896-2b445877327a","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"6ab8ced2-6c7a-41b6-b861-ba066bd40f40","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"0c34aedd-80a3-470b-a0f6-c327a4346be7","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"717a5892-fa23-499b-a61d-cff228943aaf","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"bd9be971-69fc-4793-ad6d-234be7a93048","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"a1e8d38f-43d8-4b3e-b747-3fbf7656fcd9","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"d6995fdf-76ee-421f-9e7a-3fb324d14bbb","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"64fa3155-4543-4acd-83b7-f9860fd46673","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"698413bd-0b16-4287-baec-644d98a411d1","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"7e4393a0-21ef-438b-981b-325b64db5baa","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]}]
        
(Showing Draft Content)

セル範囲のHTMLへのエクスポート

SpreadJSでは、CellRangeクラスのtoHTMLメソッドを使用して、セル範囲またはワークシート全体をHTMLデータとして出力できます。

toHTML メソッドは、 includeStyleheaderOptions の2つのパラメータを提供します。 includeStyle パラメータは、スタイルとセル結合を含めるかどうかを示し、デフォルト値はtrueです。 headerOptions パラメータは、セル範囲がビューポート領域の行全体または列全体である場合は行ヘッダまたは列ヘッダを含めるかどうかを示します。

HeaderOptions列挙体には、次の4つのオプションがあります。

  • noHeaders :セル範囲をHTMLにエクスポートするときに、列ヘッダと行ヘッダを削除します。(デフォルト値)

  • rowHeaders :セル範囲をHTMLにエクスポートするときに、指定された行ヘッダを含めます。

  • columnHeaders :セル範囲をHTMLにエクスポートするときに、指定された列ヘッダを含めます。

  • allHeaders :セル範囲をHTMLにエクスポートするときに、指定された行ヘッダと列ヘッダの両方を含めます。

includeStyles パラメータを使用して、セル範囲をHTMLにエクスポートするときにセルのスタイルを含めるかどうかを指定できます。デフォルト値はtrueです。

セル範囲をHTMLにエクスポートするときにサポートされる機能は、次のとおりです。

  • セルテキスト

  • セル結合

  • backColor、foreColor、font、vAlign、hAlign、borderLeft、borderRight、borderTop、borderBottom、textDecorationなどのセルのスタイル設定

  • グリッド線

  • 行の高さまたは列幅

セル範囲をHTMLにエクスポートするときにサポートされない機能は、次のとおりです。

  • textIndent、wordWrap、showEllipsis、shrinkToFit、backgroundImage、cellType、watermark、diagonalDown、diagonalUp、isVerticalText、cellButtons、dropDowns、textOrientationなどのスタイルプロパティ。

  • ズーム

  • スクロールバー

  • タブストリップ

  • 自動マージ

  • バーコード

  • チャート

  • コメント

  • データバーとアイコンセット

  • フィルタ

  • 画像とカスタムフローティングオブジェクト

  • 数式テキストボックス

  • グループ

  • ハイパーリンク

  • アウトライン列

  • ピボットテーブル

  • シェイプ

  • スライサー

  • スパークライン

  • ステータスバー

  • テーブル

  • データ検証

セル範囲をHTMLにエクスポートする

toHTML メソッドを使用して、実行時とコードで、選択した範囲をHTMLにエクスポートします。

toHTML メソッドを使用して、実行時にビューポート領域の選択したセル範囲をHTMLにエクスポートできます。次の図は、実行時に選択したセル範囲をHTMLにエクスポートする例を示します。

Image showing exporting range to html at runtime.

次のサンプルコードは、実行時にビューポート領域の選択したセル範囲をHTMLにエクスポートします。

// ビューポート領域の選択されたセル範囲からhtmlContainerへHtmlコンテンツを取得します。
var r, c, rc, cc;
// 選択範囲を取得します。
var selectedRanges = activeSheet.getSelections();
r = selectedRanges[0].row;
rc = selectedRanges[0].rowCount;
c = selectedRanges[0].col;
cc = selectedRanges[0].colCount;
var html = activeSheet.getRange(r, c, rc, cc).toHtml();
document.getElementById("htmlContainer").innerHTML = html;

また、コードを使用して、ビューポート領域の選択した範囲をHTMLにエクスポートすることができます。

次のサンプルコードは、ワークシート内の特定のセル範囲(A1:B8)をHTMLにエクスポートします。

// ビューポート領域のセル範囲(A1:B8)からhtmlContainerへHtmlコンテンツを取得します。
var html = activeSheet.getRange("A1:B8").toHtml();
document.getElementById("htmlContainer").innerHTML = html;

ワークシート全体をHTMLにエクスポートする

セル範囲をワークシート全体に設定することで、ワークシート全体をHTMLにエクスポートできます。

次のサンプルコードは、ワークシート全体をHTMLにエクスポートします。

// データを含むビューポート領域からhtmlContainerへHtmlコンテンツを取得します。
var html = activeSheet.getRange(-1, -1, -1, -1).toHtml(GC.Spread.Sheets.HeaderOptions.allHeaders);
document.getElementById("htmlContainer").innerHTML = html;