ビューワの初期化

説明: JSビューワがハイパーリンク、ブックマークリンク、ドリルダウンレポートを開く前、またはレポートコントロールの表示／非表示を切り替える前に呼び出されるコールバック。

型: function(actionType, actionParams)

action: (actionType, actionParams) => console.log('Action type: ' + actionType + '; Action parameters: ' + actionParams)

説明: JSビューワのエクスポート機能で使用できるエクスポート形式の配列。デフォルトでは、PDF、Word、JSON、XML、画像、Excel、CSV形式のエクスポートができます。

型: Array

ページ/RDLレポート:

availableExports: ['Mht', 'Pdf', 'Tiff', 'Xls', 'Xlsx', 'Csv', 'Doc', 'Docx', 'Json', 'Xml']

セクションレポート:

availableExports: ['Mht', 'Pdf', 'Tiff', 'Xls', 'Xlsx', 'Rtf', 'Txt']

説明: 単一ページ／連続ページを設定します。

型: String

有効な値: 'single', 'continuous'

displayMode: 'Continuous'

説明: サーバー上でドキュメントが完全にロードされたときに呼び出されるコールバック。

型: function()

documentLoaded: () => console.log('サーバー上でドキュメントが完全にロードされました。')

戻り値: Void

説明: JSビューワコントロールをホストする要素を指定するJQueryセレクター。

型: String

例:

element: '#viewerContainer'

説明: レポートの表示プロセスでエラーが発生したときに呼び出されるコールバック。コールバックがtrueを返した場合、デフォルトのエラーパネルは表示されません。エラーパラメータは、エラーメッセージをカスタマイズできるプロパティを持つオブジェクトです。

型: function(error)

error: (error) => {
    if (error.message) {
        // エラーメッセージを表示します。
        alert("内部エラーです。管理者へお問い合わせください。");
        return true; // デフォルトのエラーメッセージを表示しません。
    }
}

説明:: ビューワの表示に使用する事前定義のロケールを指定します。ロケールを明示的に指定しない場合は、ブラウザの設定に対応するロケールが使用されます。ビューワのUI表示は、以下の言語をサポートしています。       

型: String

有効な値: 'en-US'（英語）、'ja-JP'（日本語）、'zh-CN'（中国語）

例:

locale: 'ja-JP'

説明: ローカライズされた文字列を含むJSON。すべての文字列が必要ではありません。欠損値はデフォルトのローカライズされたデータを使用して表示されます。これは localeUriに似ていますが、ローカライズされたデータへのパスではなく、JSONオブジェクトを介したローカライズされたデータ自体が指定されます。

型: JSON

例:

localeData: JSON.parse( `{
    "export":  {
      "boolTextFalse": "No",
      "boolTextTrue": "Yes"
    },
    "viewer": {
      "toolbar": {
        "refresh": "Refresh"
      }
    }
  }`
),

説明: ローカライズされた文字列を含むファイル（custom-locale.json）のURL。すべての文字列が必要ではありません。欠損値はデフォルトのローカライズされたデータを使用して表示されます。

型: String

例:

localeUri: './custom-locale.json'

custom-locale.jsonファイルの内容：

{
  "export": {
    "boolTextFalse": "No",
    "boolTextTrue": "Yes",
    ...
  },
  "exportcsv": {
    "friendlyName": "-CSV-",
    "settings": {
      "ColumnsDelimiter": {
        "label": "ColumnsDelimiter",
        "category": "Misc"
      },
      ...
    },
    ...
  },
  ...
}
        

説明: JSビューワでページの表示モードを設定します。デフォルト値は「Paginated」です。

型: String

有効な値: 'Galley', 'Paginated'

例:

renderMode: 'Galley'

説明: JSビューワに表示されるレポートのID。

型: String

例:

reportID: 'AnnualReport.rdlx'

説明: JSビューワが要求されたレポートに関する情報を取得するときに呼び出されるコールバック。TOC情報、パラメータ情報、およびレンダリングされたレポート結果へのリンクを含むreportInfoオブジェクトがこのコールバックに渡されます。

型: function(reportInfo)

reportLoaded: (reportInfo) => console.log('The report ' + reportInfo.name + ' was successfully loaded!')

説明: レポートの実行に使用されるパラメータを表す{name, value}ペアの配列。

型: Array

例:

reportParameters: [{ name: 'ReportParameter1', values: ['1']}]

説明: Web APIに接続するための設定を定義します。

型: 次のオプションのプロパティを持つオブジェクト。

• url：Web APIに接続するためのURL。
  型: String
  例:

• • URLで接頭辞を使用する場合
    

    url: '/api/reporting' // デフォルト値
    

  • 完全なURLを使用する場合
    

    url: 'http:example.com/api/reporting'
    

• securityToken：Web APIへのアクセスに必要なセキュリティキー。
  型: String
  例:
  

  securityToken: 'security_token'
  

• onRequest：リクエストを実行する前のコールバック。セキュリティトークンを変更するなどのfetch リクエストの前にオプションを追加できるinit引数を受け取ります。
  型: function
  例:
  

  onRequest: (init) => init.headers.Authorization = 'security_token' 
  

  init引数は、次のオプションを受け取るオブジェクトです。

  • credentials： リクエストの資格情報を設定します。
  • headers： リクエストのヘッダを設定します。
  • signal： リクエストのシグナルを設定します。

  詳細については、「https://triple-underscore.github.io/Fetch-ja.html#requestinit」を参照してください。

例:

reportService: {
    url: 'http://example.com/api/reporting', // WebサービスURL
    securityToken: 'security_token', // securityTokenを提供します。
    onRequest: (init) => {        
         init.credentials = "include",
         init.headers = { "Cache-Control": "no-cache, no-store, must-revalidate", "Expires": "0", "Pragma": "no-cache", "Accept": "application/json" },
         init.signal = new AbortController().signal
         }        
    }

説明: ドリルダウンレポートの親レポートをビューワに表示します。

構文: backToParent()Void

viewer.backToParent()

戻り値: Void

説明：Viewerの新しいインスタンスを作成し、指定されたDOM要素にレンダリングします。

構文: create()Void 

パラメータ:

• params

const viewer = GrapeCity.ActiveReports.JSViewer.create({
    element: '#root',
    reportID: 'AnnualReport.rdlx',
    availableExports: ['Xml', 'Pdf'],
    // その他のプロパティ
});        

戻り値: Void

説明: 要素からビューワコンテンツを削除します。

構文: destroy()Void

viewer.destroy()

戻り値: Void

説明: 現在表示されているレポートをエクスポートします。

構文: export(exportType,callback,saveAsDialog,settings)Void

パラメータ:

例:        

viewer.export('Pdf', { Title: '1997 Annual Report' })

戻り値: Void

説明:レポートの見出しを取得します。

構文: viewer.getToc()

例:        

console.log(viewer.getToc())

戻り値: any

説明: ビューワに特定のページを表示します。

構文: goToPage(number, offset, callback)Void

パラメータ:

viewer.goToPage(1)

戻り値: Void

説明:レポートを開きます。

構文: openReport(reportID: string, reportParameters?: Array<Parameter>): void

パラメータ:

viewer.openReport('Invoice.rdlx')

戻り値: Void

説明: 現在レポートが表示されている場合、そのレポートを印刷します。

構文: print()Void

viewer.print()

戻り値: Void

説明: レポートのプレビューを更新します。

構文: option(name,[value])Object

viewer.refresh()

戻り値: Void

説明：JSビューワの現在のバージョンを表す文字列。

構文: GrapeCity.ActiveReports.JSViewer.version

console.log(GrapeCity.ActiveReports.JSViewer.version)

戻り値: string

説明：カスタム項目（ボタン）をツールバーの最後尾に追加します。

型: item: ToolbarItem

例:

ToolbarItem = {
    key: string;
    iconCssClass?: string;
    icon?: Icon;
    text?: string;
    title?: string;
    checked?: boolean;
    enabled?: boolean;
    action?: (toolbarItem) => function;
    onUpdate?: (args: ChangedEventArgs, toolbarItem) => function;
}
 
Icon = FontIcon | SVGIcon;
 
 
SVGIcon = {
    type: 'svg';
    content: any; //(string | JSX.element)
    size?: Size;
    rotate?: '90' | '180' | '270';
};
 
 
FontIcon = {
    type: 'font';
    iconCssClass: string;
    fontSize?: string;
}
 
var pdfExportButton = {
    key: '$pdfExportButtonKey',
    iconCssClass: 'mdi mdi-file-pdf',
    enabled: true,
    action: function(item) {
        console.log('ドキュメントをPDF形式にエクスポートします。');
    },
    onUpdate: function(arg, item) {
        console.log('ビューワが更新されました。ボタンの状態を確認または更新します。');
    }
};
 
 
//またはsvg形式のボタン
var icon = `
    
`;
 
var svgPdfExportButton = {
    key: '$pdfExportButtonKey',
    icon: {type: 'svg', content: icon},
    enabled: true,
    action: function(item) {
        console.log('ドキュメントをPDF形式にエクスポートします。');
    },
    onUpdate: function(arg, item) {
        console.log('ビューワが更新されました。ボタンの状態を確認または更新します。');
    }
}
 
 
viewer.toolbar.addItem(pdfExportButton);
//または
viewer.toolbar.addItem(svgPdfExportButton);

説明：指定された項目のレイアウト/機能/状態を更新します。

型: String: key, ToolbarItem item       

例:        

var xlsxExportButton = {
    key: '$xlsxExportButtonKey',
    iconCssClass: 'mdi mdi-file-pdf',
    enabled: true,
    action: function(item) { console.log('ドキュメントをXLSX形式にエクスポートします。'); },
    onUpdate: function(arg, item) { console.log('ビューワが更新されました。ボタンの状態を確認または更新します。'); }
};
viewer.toolbar.updateItem('$pdfExportButtonKey', xlsxExportButton); //ボタンが設定されたプロパティに応じて動作します。

説明：ツールバーからカスタム項目を削除します。デフォルトの項目を削除するには、updateLayout関数を使用します。

型: String: key

例:

viewer.toolbar.removeItem('$pdfExportButtonKey');

説明：サイドバーの表示を切り替えます。パラメータが渡されない場合、トグルとして動作します。

型: boolean

例:

viewer.toggleSidebar();//サイドバーを非表示にします。

viewer.toggleSidebar(true);//サイドバーを表示します。

説明: 現在表示されているページ番号を取得します。

構文: viewer.currentPage

console.log(viewer.currentPage)

戻り値: 現在表示されているページ番号を表す整数。

説明: 現在表示されているレポートのページ数を取得します。

構文: viewer.pageCount

console.log(viewer.pageCount())

戻り値: ページ数を表す整数。