エクスポートについて
ビューワでは、レポートを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にエクスポートしてダウンロードします。
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");
// レポートパラメータを設定するには、次のようなコードを使用できます。
// パラメータに単一の値がある場合でも、右側に配列が必要であることに注意してください。
report.parameters["ParamName"].values = ["Value1", "Value2"];
// レポートパラメータに既定値が設定されている場合は、次のメソッドを呼び出す必要があります。
await report.resolveParametersValues();
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");各エクスポート形式でサポートされている設定の詳細については、エクスポート設定を参照してください。