[]
デモ ヘルプ APIリファレンス
トライアル版
(Showing Draft Content)

エクスポートについて

ビューワでは、レポートをPDF、XLSX、HTML、CSVデータにエクスポートできる機能が提供されています。ビューワのサイドバーにて、ファイル形式を選択しエクスポート設定を変更できるインターフェイスがあります。また、APIを使用してワンタッチエクスポートすることができます。

サイドバーにエクスポートボタンを表示する

JavaScript


対応するエクスポート形式を表示するため、アプリケーションにar-js-pdf.js、ar-js-xlsx.js、ar-js-html.js、ar-js-tabular-data.jsを読み込む必要があります。簡単な方法は、次のようにCDNへの参照を追加することです。

<!-- CDN参照をご利用する場合は以下URLの"X.X.X"を使用するActiveReportsJSのバージョンに置き換えてご利用ください -->
<script src="https://cdn.grapecity.com/activereportsjs/X.X.X/dist/ar-js-pdf.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/X.X.X/dist/ar-js-xlsx.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/X.X.X/dist/ar-js-tabular-data.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/X.X.X/dist/ar-js-html.js"></script>

実行時に利用可能なエクスポート形式を設定するためにはavailableExportsを使用します。

次のコードではビューワのインスタンスを生成し、PDFのみエクスポートを許可しています。

var viewer = new ActiveReports.Viewer("#viewer-host");
viewer.availableExports = ["pdf"];

ファイル形式毎のエクスポート設定を行う場合、ExportsSettingsオプションを使用します。詳細はエクスポート設定を参照してください。


Angular


Angularアプリケーションでビューワのエクスポートを有効にする方法については、Angularコンポーネントを参照してください。

ビューワのavailableExportsプロパティを使用して、実行時に利用可能なエクスポート形式をフィルタし、exportSettingsプロパティを使用してエクスポート設定を事前に設定できます。


React


Reactアプリケーションでビューワのエクスポートを有効にするには、コードを使用して@grapecity/activereportsパッケージから、使用するエクスポート形式に合わせて対応するモジュールをインポートします。詳細はデモを参照してください。

ビューワのavailableExportsプロパティを使用して、実行時に利用可能なエクスポート形式をフィルタし、exportSettingsプロパティを使用してエクスポート設定を事前に設定できます。


Vue


Vueアプリケーションでビューワのエクスポートを有効にするには、コードを使用して@grapecity/activereportsパッケージから、使用するエクスポート形式に合わせて対応するモジュールをインポートします。詳細はデモを参照してください。

ビューワのavailableExportsプロパティを使用して、実行時に利用可能なエクスポート形式をフィルタし、exportSettingsプロパティを使用してエクスポート設定を事前に設定できます。

ワンタッチエクスポート

APIを使用して、ワンタッチエクスポートすることができます。そのためPdfExportモジュール、XlsxExportモジュール、HtmlExportモジュール、TabularDataExportモジュールではexportDocumentメソッドを提供しています。


PDF


次のコードは、レポートをロードして実行し、PDFにエクスポートしてダウンロードします。

import { Core, PdfExport } from "@grapecity/activereports";

const pdfExportSettings: PdfExport.PdfSettings = {
  title: "Test document",
  author: "GrapeCity",
  keywords: "export, report",
  subject: "Report",
  pdfVersion: "1.4",
};

const report = new Core.PageReport();
await report.load("/reports/text-only.rdlx-json");
const doc = await report.run();
const result = await PdfExport.exportDocument(doc, pdfExportSettings);
result.download("exportedreport.pdf");

XLSX


次のコードは、レポートをロードして実行し、XLSXにエクスポートしてダウンロードします。

import { Core, XlsxExport } from "@grapecity/activereports";

const xlsxExportSettings: XlsxExport.XlsxSettings = {
  creator: "Test Creator",
  sheetName: "Test",
};

const report = new Core.PageReport();
await report.load("/reports/text-only.rdlx-json");
const doc = await report.run();
const result = await XlsxExport.exportDocument(doc, xlsxExportSettings);
result.download("exportedreport.xlsx");

HTML


次のコードは、レポートをロードして実行し、HTMLにエクスポートしてダウンロードします。

import { Core, HtmlExport } from "@grapecity/activereports";

const htmlExportSettings: HtmlExport.HtmlSettings = {
  autoPrint: false,
  embedImages: "external",
  title: "TestReport",
};

const report = new Core.PageReport();
await report.load("/reports/text-only.rdlx-json");
const doc = await report.run();
const result = await HtmlExport.exportDocument(doc, htmlExportSettings);
result.download("exportedreport.html");

CSVデータ(TabularData)


次のコードは、レポートをロードして実行し、CSVにエクスポートしてダウンロードします。

import { Core, TabularDataExport } from "@grapecity/activereports";

const CsvExportSettings: TabularDataExport.CsvSettings = {
    outputType: "plain",
    tableSeparator: "===============",
};

const report = new Core.PageReport();
await report.load("/reports/text-only.rdlx-json");
const doc = await report.run();
const result = await TabularDataExport.exportDocument(doc, CsvExportSettings);
result.download("exportedreport.csv");

各エクスポート形式でサポートされている設定の詳細については、エクスポート設定を参照してください。

関連トピック