vue-cli で stimulsoft.reports.js を使用する詳細なチュートリアル

{
	「データソース名」:[
		// ...データリスト]
}

{
    "データ"： [
        {
            "a": "私はAです",
            "b": "私はBです",
            "c": "私はCです"
        },
        {
            "a": "私はAです",
            "b": "私はBです",
            "c": "私はCです"
        },
        {
            "a": "私はAです",
            "b": "私はBです",
            "c": "私はCです"
        }
    ]
}

{
	「顧客」: [{
		"顧客ID": "ALFKI",
		"CompanyName": "アルフレッド・フッターキステ",
		"連絡先名": "マリア・アンダース",
		"ContactTitle": "営業担当者",
		「住所」: 「Obere Str. 57」、
		「都市」：「ベルリン」、
		「地域」: null、
		"郵便番号": "12209",
		「国」：「ドイツ」、
		「電話番号」: 「030-0074321」
		「ファックス」：「030-0076545」
	}, {
		"顧客ID": "ANATR",
		"CompanyName": "Ana Trujillo Emparedados and Helpers",
		"連絡先名": "アナ・トルヒージョ",
		"連絡先タイトル": "オーナー",
		「住所」: 「Avda. de la Constitución 2222」、
		「都市」：「メキシコDF」、
		「地域」: null、
		"郵便番号": "05021",
		「国」：「メキシコ」、
		「電話」：「（5）555-4729」
		「ファックス」：「（5）555-3745」
	}]
}

<テンプレート>
  <div id="アプリ">
    <div>
      <h2>Stimulsoft Reports.JS ビューア</h2>
      <button @click="print">印刷</button>
      <button @click="save">保存</button>
      <button @click="setJson">JSON を設定する</button>
      <div id="ビューア"></div>
    </div>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前:「アプリ」、
  データ（） {
    戻る {};
  },
    // 公式サンプルテンプレートコードをロードします。マウント: function () {
    console.log("ビューアービューを読み込んでいます");
    // ツールバー console.log("デフォルト オプションでレポート ビューアーを作成します");
    var ビューア = 新しいウィンドウ.Stimulsoft.Viewer.StiViewer(
      ヌル、
      「StiViewer」、
      間違い
    );

    // レポート console.log("新しいレポートインスタンスを作成します");
    var レポート = 新しいウィンドウ.Stimulsoft.Report.StiReport();

    // ファイルを読み込み console.log("URL からレポートを読み込み");
    report.loadFile("/reports/SimpleList.mrt");

    // レポートを作成します console.log("レポートをビューアに割り当てます。ビューアがレンダリングされた後、レポートは自動的に生成されます");
    viewer.report = レポート;

    // タグを挿入 console.log("選択した要素にビューアをレンダリングしています");
    ビューア.renderHtml("ビューア");

    console.log("読み込みが正常に完了しました!");
  },
  メソッド: {
    //プリンターを呼び出してデータを印刷する print() {
      var レポート = 新しいウィンドウ.Stimulsoft.Report.StiReport();
      report.loadFile("/reports/SimpleList.mrt");
      レポートを印刷します。
    },
    // データをエクスポートして保存する save() {
      var レポート = 新しいウィンドウ.Stimulsoft.Report.StiReport();
      report.loadFile("/reports/SimpleList.mrt");
      // レンダリングされたレポートを JSON 文字列として保存します。var json = report.saveDocumentToJsonString();
      コンソールにログ出力します。
      // レポートファイル名を取得します var fileName = report.reportAlias
        ? report.reportAlias
        : レポート.レポート名;
      console.log("レポート.レポート名", レポート.レポート名);
      コンソールにログ出力します。
      console.log("ファイル名", ファイル名);
      // データをファイルに保存します window.Stimulsoft.System.StiObject.saveAs(
        json、
        ファイル名 + ".mdc"、
        「アプリケーション/json;文字セット=utf-8」
      );
    },
    // jsonデータを取得してページに書き込む setJson() {
      var レポート = 新しいウィンドウ.Stimulsoft.Report.StiReport();

      // report.loadFile("/reports/SimpleList.mrt");// 公式データ テンプレート report.loadFile("/reports/Test.mrt");// 独自のデータ テンプレート // 新しい DataSet オブジェクトを作成します var dataSet = new window.Stimulsoft.System.Data.DataSet("JSON");
      // 指定された URL から DataSet オブジェクトに JSON データ ファイルを読み込みます // dataSet.readJsonFile("/reports/Demo.json"); // 公式データ dataSet.readJsonFile("/reports/Test.json"); // 独自の json データ // ファイルは上記の readJsonFile メソッドを使用してインポートされ、インターフェイス ネットワーク要求は次のメソッドを使用してインポートされます // let json=/*ここではデータ要求は省略されます*/
      // dataSet.readJson(JSON.stringify(json));
        
      // レポート テンプレート内のデータをクリアします。report.dictionary.databases.clear();
        
      // データ セット オブジェクトを登録します report.regData("JSON", "JSON", dataSet);
        
      // 登録データを使用してレポートをレンダリングします // report.render();
      // ツールバー var viewer = new window.Stimulsoft.Viewer.StiViewer(
        ヌル、
        「StiViewer」、
        間違い
      );
      // レポートを作成します。viewer.report = report;
      //タグを挿入 viewer.renderHtml("viewer");
    },
  },
};
</スクリプト>

<スタイル>
</スタイル>