JavaScriptでJSビューワの操作

JavaScriptを使用してJSビューワを操作する場合、初期化中と実行時に設定できるオプションと、初期化した後にのみ使用できるAPIメソッドとプロパティがあります。

action	animation	autoBackgroundColor	availableExports	defaultExportSettings	displayMode
documentLoaded	element	error	initialZoomMode	locale	localeData
localeUri	pageView	panelsLocation	parametersPanel	renderFormat	renderMode
reportID	reportLoaded	reportParameters	reportService	silentPrint	theme
backToParent	currentPage	destroy	export	getToc	goToPage
openReport	pageCount	print	refresh	search	sidebar
toolbar

action

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

型：(actionType, actionParams): void

パラメータ：

actionType: string

actionParams: any[]

戻り値：void

ESM

import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
action: (actionType, actionParams) => console.log('Action type: ' + actionType + '; Action parameters: ' + actionParams)
});

UMD

var viewer = GrapeCity.ActiveReports.JSViewer.create({
action: (actionType, actionParams) => console.log('Action type: ' + actionType + '; Action parameters: ' + actionParams)
});

animation

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

ESM

import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
animation: {
    loadChart: {
        enabled: true
    },
    hoverChart: {
        enabled: true
    },
    hoverTable: {
        enabled: true,
        backgroundColor: 'LightGray',
        textColor: 'DarkGray'
    }
}
});

UMD

var viewer = GrapeCity.ActiveReports.JSViewer.create({
animation: {
    loadChart: {
        enabled: true
    },
    hoverChart: {
        enabled: true
    },
    hoverTable: {
        enabled: true,
        backgroundColor: 'LightGray',
        textColor: 'DarkGray'
    }
}
});

autoBackgroundColor

説明：trueに設定すると、表示領域の背景色がレポートの本体の背景色で塗りつぶされます。このプロパティは、ダッシュボードでのみ使用できます。

ESM

import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
 autoBackgroundColor : true;
});

UMD

var viewer = GrapeCity.ActiveReports.JSViewer.create({
 autoBackgroundColor : true;
});

availableExports

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

ESM

import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
availableExports: ['Xml', 'Pdf']
});

UMD

var viewer = GrapeCity.ActiveReports.JSViewer.create({
availableExports: ['Xml', 'Pdf']
});

defaultExportSettings

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

ESM

import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
defaultExportSettings: {
    xls: {
        FileName: {
            value: "Hihihi",
            visible: false
        }   
    }
}
});

UMD

var viewer = GrapeCity.ActiveReports.JSViewer.create({
defaultExportSettings: {
    xls: {
        FileName: {
            value: "Hihihi",
            visible: false
        }   
    }
}
});

displayMode

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

ESM

import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
displayMode: 'Continuous'
});

UMD

var viewer = GrapeCity.ActiveReports.JSViewer.create({
displayMode: 'Continuous'
});

documentLoaded

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

型：(): void

戻り値：void

ESM

import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
documentLoaded: () => console.log('サーバー上でドキュメントが完全にロードされました。')
});

UMD

var viewer = GrapeCity.ActiveReports.JSViewer.create({
documentLoaded: () => console.log('サーバー上でドキュメントが完全にロードされました。')
});

element

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

ESM

import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
element: '#viewerContainer'
});

UMD

var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#viewerContainer'
});

error

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

型：(error): boolean

パラメータ：

error: ErrorInfo

戻り値：boolean

ESM

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

UMD

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

initialZoomMode

説明：ビューワでレポートをプレビューするときの表示倍率またはズームレベル（%）を設定します。

ESM

import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
 initialZoomMode: 'FitToWidth';
});

UMD

var viewer = GrapeCity.ActiveReports.JSViewer.create({
 initialZoomMode: 'FitToWidth';
});

locale

説明：ビューワの表示に使用する事前定義のロケールを指定します。ロケールを明示的に指定しない場合は、ブラウザの設定に対応するロケールが使用されます。

ESM

import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
locale: 'ja-JP'
});

UMD

var viewer = GrapeCity.ActiveReports.JSViewer.create({
locale: 'ja-JP'
});

localeData

説明：ローカライズされた文字列を含むJSON。すべての文字列が必要ではありません。欠損値はデフォルトのローカライズされたデータを使用して表示されます。

ESM

import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
localeData: JSON.parse( `{
    "export":  {
      "boolTextFalse": "No",
      "boolTextTrue": "Yes"
    },
    "viewer": {
      "toolbar": {
        "refresh": "Refresh"
      }
    }
  }`
)
});

UMD

var viewer = GrapeCity.ActiveReports.JSViewer.create({
localeData: JSON.parse( `{
    "export":  {
      "boolTextFalse": "No",
      "boolTextTrue": "Yes"
    },
    "viewer": {
      "toolbar": {
        "refresh": "Refresh"
      }
    }
  }`
)
});

localeUri

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

ESM

import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
localeUri: './locale.json'
});

UMD

var viewer = GrapeCity.ActiveReports.JSViewer.create({
localeUri: './locale.json'
});

locale.json

locale.json

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

pageView

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

ESM

import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
pageView: {
    horizontalAlignment: 'left',
    viewMode: 'standard'
}
});

UMD

var viewer = GrapeCity.ActiveReports.JSViewer.create({
pageView: {
    horizontalAlignment: 'left',
    viewMode: 'standard'
}
});

panelsLocation

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

ESM

import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
panelsLocation: 'sidebar'
});

UMD

var viewer = GrapeCity.ActiveReports.JSViewer.create({
panelsLocation: 'sidebar'
});

parametersPanel

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

ESM

import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
parametersPanel: {
    * location: 'top',
 * open: 'always'
}});

UMD

var viewer = GrapeCity.ActiveReports.JSViewer.create({
parametersPanel: {
    * location: 'top',
 * open: 'always'
}});

renderFormat

説明：レポートのレンダリングモードを設定します。

auto：セクションレポートはSVG形式、それ以外はHTML形式で描画します。

html：レポートをHTML形式で描画します。

svg：レポートをSVG形式で描画します。

ESM

import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
 renderFormat : 'auto'
});

UMD

var viewer = GrapeCity.ActiveReports.JSViewer.create({
 renderFormat : 'auto'
});

renderMode

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

ESM

import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
renderMode: 'Galley'
});

UMD

var viewer = GrapeCity.ActiveReports.JSViewer.create({
renderMode: 'Galley'
});

reportID

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

ESM

import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
reportID: 'AnnualReport.rdlx'
});

UMD

var viewer = GrapeCity.ActiveReports.JSViewer.create({
reportID: 'AnnualReport.rdlx'
});

reportLoaded

説明：JSビューワが要求されたレポートに関する情報を取得するときに呼び出されるコールバック。

型：(reportInfo): void

パラメータ：

reportInfo: ReportInfo

戻り値：void

ESM

import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
reportLoaded: (reportInfo) => console.log('The report ' + reportInfo.name + ' was successfully loaded!')
});

UMD

var viewer = GrapeCity.ActiveReports.JSViewer.create({
reportLoaded: (reportInfo) => console.log('レポート ' + reportInfo.name + ' は正常にロードされました。')
});

reportParameters

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

ESM

import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
reportParameters: [{ name: 'ReportParameter1', values: ['1']}]
});

UMD

var viewer = GrapeCity.ActiveReports.JSViewer.create({
reportParameters: [{ name: 'ReportParameter1', values: ['1']}]
});

reportService

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

ESM

import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
reportService: {
    url: 'http://example.com/api/reporting',
    securityToken: '42A9CD80A4F3445A9BB60A221D042FCC',
}
});

UMD

var viewer = GrapeCity.ActiveReports.JSViewer.create({
reportService: {
    url: 'http://example.com/api/reporting',
    securityToken: '42A9CD80A4F3445A9BB60A221D042FCC',
}
});

silentPrint

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

ESM

import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
silentPrint: true
});

UMD

var viewer = GrapeCity.ActiveReports.JSViewer.create({
silentPrint: true
});

theme

説明：ビューワのUIテーマ。

ESM

import {createViewer, UIThemes} from './jsViewer.min.js';
const viewer = createViewer({
    element: '#root',
    theme: UIThemes.defaultDark
});

UMD

var viewer = GrapeCity.ActiveReports.JSViewer.create({
    theme: GrapeCity.ActiveReports.JSViewer.Themes.darkOled
});

backToParent

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

型：(): void

戻り値：void

ESM

* import { createViewer } from './jsViewer.min.js';
* const viewer = createViewer({
element: '#root',
reportID: 'AnnualReport.rdlx'
});
viewer.backToParent()

UMD

* var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#root',
reportID: 'AnnualReport.rdlx'
});
viewer.backToParent()

currentPage

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

型：(): number

戻り値：number

ESM

* import { createViewer } from './jsViewer.min.js';
* const viewer = createViewer({
element: '#root',
reportID: 'AnnualReport.rdlx'
});
console.log(viewer.currentPage())

UMD

* var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#root',
reportID: 'AnnualReport.rdlx'
});
console.log(viewer.currentPage())

destroy

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

型：(): void

戻り値：void

ESM

* import { createViewer } from './jsViewer.min.js';
* const viewer = createViewer({
element: '#root'
});
viewer.destroy()

UMD

* var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#root'
});
viewer.destroy()

export

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

型：(exportType, callback, saveAsDialog, settings, isCancelRequested?): void

パラメータ：

exportType: ExportTypes
エクスポート形式を指定します。
callback: ExportCallback
エクスポート結果が利用可能になると呼び出される関数。そのURLはcallbackに渡されます。
saveAsDialog: boolean
エクスポート結果が利用可能になったら、すぐに［名前を付けて保存］ダイアログを表示するかどうかを示します。
settings: any
エクスポートの設定。エクスポート形式によって異なります。
（オプション）isCancelRequested: (() => boolean | Promise<boolean>)
エクスポートタスクをキャンセルする時に呼び出されます。
(): boolean | Promise<boolean>
戻り値：boolean | Promise<boolean>

戻り値：void

ESM

* import { createViewer } from './jsViewer.min.js';
* const viewer = createViewer({
element: '#root',
reportID: 'AnnualReport.rdlx',
availableExports: ['Pdf']
});
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;
     }
 };

UMD

* var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#root',
reportID: 'AnnualReport.rdlx',
availableExports: ['Pdf']
});
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;
     }
 };

getToc

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

型：(): any

戻り値：any

ESM

* import { createViewer } from './jsViewer.min.js';
* const viewer = createViewer({
element: '#root',
reportID: 'AnnualReport.rdlx'
});
console.log(viewer.getToc())

UMD

* var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#root',
reportID: 'AnnualReport.rdlx'
});
console.log(viewer.getToc())

goToPage

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

型：(pageNumber): void

パラメータ：

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

戻り値：void

ESM

* import { createViewer } from './jsViewer.min.js';
* const viewer = createViewer({
element: '#root',
reportID: 'AnnualReport.rdlx'
});
viewer.goToPage(1)

UMD

* var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#root',
reportID: 'AnnualReport.rdlx'
});
viewer.goToPage(1)

openReport

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

型：(actionType, actionParams): void

パラメータ：

reportID: string
レポートのID。
（オプション）reportParameters: Parameter[]
パラメータ値の配列。

戻り値：void

ESM

* import { createViewer } from './jsViewer.min.js';
* const viewer = createViewer({
element: '#root'
});
viewer.openReport('Invoice.rdlx')

UMD

* var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#root'
});
viewer.openReport('Invoice.rdlx')

pageCount

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

型：(): number

戻り値：number（ページ数を表す整数。）

ESM

* import { createViewer } from './jsViewer.min.js';
* const viewer = createViewer({
element: '#root',
reportID: 'AnnualReport.rdlx'
});
console.log(viewer.pageCount())

UMD

* var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#root',
reportID: 'AnnualReport.rdlx'
});
console.log(viewer.pageCount())

print

説明：表示されているレポートを印刷します。

型：(): void

戻り値：void

ESM

* import { createViewer } from './jsViewer.min.js';
* const viewer = createViewer({
element: '#root',
reportID: 'AnnualReport.rdlx'
});
viewer.print()

UMD

* var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#root',
reportID: 'AnnualReport.rdlx'
});
viewer.print()

refresh

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

型：(): void

戻り値：void

ESM

* import { createViewer } from './jsViewer.min.js';
* const viewer = createViewer({
element: '#root'
});
viewer.refresh()

UMD

* var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#root'
});
viewer.refresh()

search

説明：特定の検索オプション（大文字と小文字を区別、単語単位で検索）を使用して特定の用語の検索を実行し、渡された検索結果を使用して特定のコールバックを呼び出します。

型：(searchTerm, searchOptions, callback): void

パラメータ：

searchTerm: string
検索する文字列。
searchOptions: SearchOptions
オプションで検索オプションを定義するオブジェクト。
callback: ((searchResult) => void)
検索の実行後に呼び出す関数。
(searchResult): void
パラメータ：searchResult: any
戻り値：void

ESM

* import { createViewer } from './jsViewer.min.js';
* const viewer = createViewer({
element: '#root',
reportID: 'AnnualReport.rdlx'
});
viewer.search('a', { matchCase: true, wholePhrase: false }, (results) => console.log(results))

UMD

* var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#root',
reportID: 'AnnualReport.rdlx'
});
viewer.search('a', { matchCase: true, wholePhrase: false }, (results) => console.log(results))

sidebar

説明：ビューワのサイドバーのインスタンス。サイドバーの表示を切り替えます（サイドバーを表示または非表示にします）。

ESM

* import { createViewer } from './jsViewer.min.js';
* const viewer = createViewer({
element: '#root'
});
viewer.sidebar.toggle(false); // サイドバーを非表示にします。

UMD

* var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#root'
});
viewer.sidebar.toggle(false); // サイドバーを非表示にします。

toolbar

説明：ビューワのツールバーのインスタンス。カスタム要素を追加したり、既存の要素を削除したりできます。

ESM

* import { createViewer } from './jsViewer.min.js';
* const viewer = createViewer({
element: '#root'
});
viewer.toolbar.toggle(false); // ツールバーを非表示にします。

UMD

* var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#root'
});
viewer.toolbar.toggle(false); // ツールバーを非表示にします。