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

型: function(actionType, actionParams)

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

説明: レポートをプレビューする時に使用できるアニメーションオプション。

型: 利用可能なオブジェクトとプロパティは次のとおりです。

• loadChart
  プロパティ： enabled
  型: Boolean (default 'false')
  
• hoverChart
  プロパティ： enabled
  型: Boolean (default 'false')
  
• hoverTable
  プロパティ： enabled
       型: Boolean (default 'false')
  
  プロパティ： backgroundColor
      型: String
      有効な値: 任意
  
  プロパティ： textColor
     型: String
     有効な値: 任意

詳細については、「アニメーション」を参照してください。

animation: {
    loadChart: {
        enabled: true
    },
    hoverChart: {
        enabled: true
    },
    hoverTable: {
        enabled: true,
        backgroundColor: 'LightGray',
        textColor: 'DarkGray'
    }
}

説明: JSビューワのエクスポート機能で使用できるエクスポート形式の配列。ページ／RDLレポートでは、デフォルトでMht、Pdf、Tiff、Xls、Xlsx、Csv、Doc、Docx、Json、Xml、Txt、XlsxDataおよびCsvData形式のエクスポートができます。※エクスポート機能を無効にする場合は['']のように指定します。

セクションレポートでは、デフォルトでMht、Pdf、Tiff、Xls、Xlsx、Rtf、およびTxt形式のエクスポートができます。

型: Array

availableExports: ['Xml', 'Pdf', 'XlsxData', 'CsvData', 'Rtf', 'Xls', 'Xlsx'] //エクスポート機能を無効にする場合は['']を指定します。

説明: エクスポートパネルで表示される任意のフィールドのデフォルト値と表示設定するカスタムエクスポート設定を含むオブジェクト。エクスポート形式は、mht、pdf、tiff、xls、xlsx、csv、doc、docx、json、xml、xlsxData、csvData、rtf、およびtxtです。エクスポートの設定は、エクスポート形式によって異なります。

エクスポート形式の詳細については、「カスタムエクスポート設定」を参照してください。

defaultExportSettings: {
    xls: {
        FileName: {
            value: "Filename_1",
            visible: false
        }   
    }
}

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

型:  String

有効な値: 'Single', 'Continuous'

displayMode: 'Continuous'

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

型: function()

有効な値: Void

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

説明: 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"
      },
      ...
    },
    ...
  },
  ...
}

説明: レポートページの水平方向の配置とビューを定義します。

型:利用可能なプロパティは次のとおりです。

プロパティ

• horizontalAlignment
  型: String
  有効な値: 'left', 'right', 'center'
  
• viewMode
  型: String
  有効な値: 'standard', 'noPaper'

詳細については、「ページビューのカスタマイズ」を参照してください。

pageView: {    horizontalAlignment: 'left',    viewMode: 'standard'}

説明: 検索パネル、パラメータパネルなどのパネルの位置を、JSビューワの左側（ツールバー）または右側（サイドバー）に設定します。デフォルト値は「ツールバー」です。

型: String

有効な値: 'toolbar', 'sidebar'

panelsLocation: 'sidebar'

説明: パラメータパネルの設定を指定します。

型: String

有効な値: 'default', 'top'

parametersPanel: {
    location: 'top'
}

説明: ページまたはRDLレポートの表示形式をhtmlまたはsvgに設定します。

型: String

有効な値: 'html', 'svg'

renderFormat: 'svg'

説明: 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
         }       
    }

説明: ［印刷の準備中］ダイアログを表示するかどうかを設定します。

型: Boolean

例：

const viewer = GrapeCity.ActiveReports.JSViewer.create({
  element: '#root',
  silentPrint: true,
});

silentPrint: true

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

viewer.backToParent()

説明: Viewerの新しいインスタンスを作成し、指定されたDOM要素にレンダリングします。
引数型： params （すべてのプロパティ）
戻り値: Void

<div id="viewerContainer">
const viewer = GrapeCity.ActiveReports.JSViewer.create({
    element: '#viewerContainer,
    reportID: 'Report.rdlx',
    availableExports: ['Xml', 'Pdf'],
    // その他のプロパティ
}); 

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

viewer.destroy()

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

exportType：エクスポート形式を指定します。

callback：エクスポート結果が利用可能になると呼び出される関数。そのURLはcallbackに渡されます。

saveAsDialog：エクスポート結果が利用可能になったら、すぐに［名前を付けて保存］ダイアログを表示するかどうかを示します。

settings：エクスポートの設定。エクスポート形式によって異なります。

戻り値: Void

メモ:描画拡張機能を使用して各種ファイルに出力するため、セクションレポートではsettingsの設定は有効になりません。エクスポートフィルタを使用してPDFにエクスポートするとき、ページレポート／RDLレポートではエクスポート設定は有効になりません。

viewer.export('Pdf', downloadReport, true, { Title: '1997 Annual Report' })
 // 関数はuriからレポートを取得します（コールバック関数）。
 var downloadReport = function (uri) {
 var newWin = null;
 // 新しいウィンドウでURIを開きます。
 try {
       newWin = window.open(uri);
     } catch (e) { }
 // 新しいウィンドウを開くことができない場合は、現在のウィンドウでURIを開きます。
 if (!newWin) {
  window.location = uri;
 }
 };

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

console.log(viewer.getToc())

説明: ビューワに特定のページを表示します。ページ番号は1から始まります。
引数型：

ページ番号: 移動先のページ番号。

戻り値: Void

var pageNumber = 3;
viewer.goToPage(pageNumber);

説明: レポートを開きます。
引数型：

reportID: String(reportName)

reportParameters: レポートの配列。

戻り値: Void

const reportName = "Report.rdlx";
viewer.openReport(reportName);
//または
//viewer.openReport(reportsArray[0]);

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

viewer.refresh()

説明: JSビューワの現在のバージョンを表す文字列。
戻り値: String

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

説明: デスクトップのツールバーにカスタムツールバーの項目（ボタン）を追加します。

フルスクリーンの場合： viewer.toolbar.fullscreen.addItem()
モバイルの場合： viewer.toolbar.mobile.addItem()

引数型： 次のように、ToolbarItemに属します。

type ToolbarItem = { key: string; /** * @deprecated use icon instead */ iconCssClass?: string; icon?: Icon; text?: string; title?: string; checked?: boolean; enabled?: boolean; action?: (curr?: ToolbarItem) => Partial | void; onUpdate?: (args: ChangedEventArgs, curr: ToolbarItem) => Partial | void; } ;

戻り値: item: ToolbarItem

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
var pdfExportButton = {
key: '$pdfExportButtonKey',
iconCssClass: 'fa fa-file',
enabled: true,
action: function (item) {
console.log('ドキュメントをPDF形式にエクスポートします。');
 },
onUpdate: function (arg, item) {
console.log('ビューワが更新されました。ボタンの状態を確認または更新します。');
 }
 };
viewer.toolbar.desktop.addItem(pdfExportButton);
// または
var btn = {
key: '$openDesigner',
iconCssClass: 'fa fa-folder',
text: 'ClickToSave',
enabled: true
 };
viewer.toolbar.desktop.addItem(btn);

説明:  デスクトップのツールバーから既存の項目を削除します。

フルスクリーンの場合： viewer.toolbar.fullscreen.removeItem()
モバイルの場合： viewer.toolbar.mobile.removeItem()

引数型： String
戻り値: String

viewer.toolbar.desktop.removeItem('$pdfExportButtonKey');
// pdfExportButtonKeyは、addItemメソッドを使用して追加されたボタンです。

説明: 表示されているデスクトップのツールバー項目のキーとその順序を設定します。

フルスクリーンの場合： viewer.toolbar.fullscreen.layout()
モバイルの場合： viewer.toolbar.mobile.layout()

引数型： レイアウトボタンの配列

戻り値: String

// ツールバーのレイアウトを変更します（ツールバーのボタンの位置を変更します）
var layout = ["$navigation", "$split", "$refresh", "$split", "$history", "$split", "$mousemode", "$zoom", "$fullscreen", "$split", "$print", "$singlepagemode", "$continuousmode", "$galleymode"]
viewer.toolbar.desktop.layout(layout);

説明: ツールバーの表示を切り替えます（ツールバーを表示または非表示にします）。

引数型： boolean

戻り値: trueを渡すとツールバーが表示され、falseを渡すとツールバーが非表示になります。表示を切り替えるには、値を渡しません。

viewer.toolbar.toggle(false);//ツールバーを非表示にします。
viewer.toolbar.toggle(true);//ツールバーを表示します。

説明: サイドバーの表示を切り替えます（サイドバーを表示または非表示にします）。

引数型：boolean

戻り値: trueを渡すとサイドバーが表示され、falseを渡すとサイドバーが非表示になります。表示を切り替えるには、値を渡しません。

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

説明: ツールバーに表示される順序で、デフォルトボタンと追加ボタンの識別子を返します。

戻り値: String

// キーの順序を取得し、逆にします。
viewer.toolbar.desktop.layout(viewer.toolbar.desktop.getKeys().reverse())

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

console.log(viewer.currentPage())

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

console.log(viewer.pageCount())