ActiveReports for .NET 18.0J
JavaScriptでJSビューワの操作
ActiveReportsユーザーガイド > レポートの表示 > JSビューワの使用 > 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

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

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

animation

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

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

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

autoBackgroundColor

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

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

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形式のエクスポートができます。

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

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

defaultExportSettings

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

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

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

displayMode

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

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

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

documentLoaded

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

型：(): void

戻り値：void

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

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

element

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

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

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

error

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

型：(error): boolean

パラメータ：

error: ErrorInfo

戻り値：boolean

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

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

initialZoomMode

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

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

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

locale

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

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

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

localeData

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

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

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

localeUri

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

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

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

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

pageView

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

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

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

panelsLocation

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

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

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

parametersPanel

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

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

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

renderFormat

説明：レポートのレンダリングモードを設定します。
auto：セクションレポートはSVG形式、それ以外はHTML形式で描画します。
html：レポートをHTML形式で描画します。
svg：レポートをSVG形式で描画します。

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

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

renderMode

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

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

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

reportID

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

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

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

reportLoaded

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

型：(reportInfo): void

パラメータ：

reportInfo: ReportInfo

戻り値：void

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

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

reportParameters

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

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

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

reportService

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

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

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

silentPrint

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

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

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

theme

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

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

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

backToParent

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

型：(): void

戻り値：void

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

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

currentPage

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

型：(): number

戻り値：number

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

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

destroy

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

型：(): void

戻り値：void

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

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

export

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

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

パラメータ：

 戻り値：void

   * 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;
        }
    };

   * 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

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

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

goToPage

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

型：(pageNumber): void

パラメータ：

戻り値：void

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

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

openReport

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

型：(actionType, actionParams): void

パラメータ：

戻り値：void

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

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

pageCount

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

型：(): number

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

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

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

print

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

型：(): void

戻り値：void

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

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

refresh

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

型：(): void

戻り値：void

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

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

search

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

型：(searchTerm, searchOptions, callback): void

パラメータ：

 戻り値：void

   * 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))

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

sidebar

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

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

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

toolbar

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

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

   * var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#root'
});
viewer.toolbar.toggle(false); // ツールバーを非表示にします。
関連トピック
JSビューワの使用

 

 

© MESCIUS inc. All rights reserved.