{
	"數(shù)據(jù)源名":[
		// ...數(shù)據(jù)列表
	]
}

{
    "data": [
        {
            "a": "我是A",
            "b": "我是B",
            "c": "我是C"
        },
        {
            "a": "我是A",
            "b": "我是B",
            "c": "我是C"
        },
        {
            "a": "我是A",
            "b": "我是B",
            "c": "我是C"
        }
    ]
}

{
	"Customers": [{
		"CustomerID": "ALFKI",
		"CompanyName": "Alfreds Futterkiste",
		"ContactName": "Maria Anders",
		"ContactTitle": "Sales Representative",
		"Address": "Obere Str. 57",
		"City": "Berlin",
		"Region": null,
		"PostalCode": "12209",
		"Country": "Germany",
		"Phone": "030-0074321",
		"Fax": "030-0076545"
	}, {
		"CustomerID": "ANATR",
		"CompanyName": "Ana Trujillo Emparedados y helados",
		"ContactName": "Ana Trujillo",
		"ContactTitle": "Owner",
		"Address": "Avda. de la Constitución 2222",
		"City": "México D.F.",
		"Region": null,
		"PostalCode": "05021",
		"Country": "Mexico",
		"Phone": "(5) 555-4729",
		"Fax": "(5) 555-3745"
	}]
}

<template>
  <div id="app">
    <div>
      <h2>Stimulsoft Reports.JS Viewer</h2>
      <button @click="print">打印</button>
      <button @click="save">保存</button>
      <button @click="setJson">設(shè)置JSON</button>
      <div id="viewer"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {};
  },
    // 加載官方示例模板代碼
  mounted: function () {
    console.log("加載查看器視圖");
    // 工具欄
    console.log("創(chuàng)建具有默認(rèn)選項的報表查看器");
    var viewer = new window.Stimulsoft.Viewer.StiViewer(
      null,
      "StiViewer",
      false
    );

    // 報表
    console.log("創(chuàng)建一個新的報表實例");
    var report = new window.Stimulsoft.Report.StiReport();

    // 加載文件
    console.log("從url加載報告");
    report.loadFile("/reports/SimpleList.mrt");

    // 創(chuàng)建報表
    console.log("將報表分配給查看器，報表將在呈現(xiàn)查看器之后自動生成  ");
    viewer.report = report;

    // 注入標(biāo)簽
    console.log("將查看器呈現(xiàn)給選定的元素");
    viewer.renderHtml("viewer");

    console.log("加載成功完成!");
  },
  methods: {
    // 調(diào)用打印機(jī)打印數(shù)據(jù)
    print() {
      var report = new window.Stimulsoft.Report.StiReport();
      report.loadFile("/reports/SimpleList.mrt");
      report.print();
    },
    // 導(dǎo)出保存數(shù)據(jù)
    save() {
      var report = new window.Stimulsoft.Report.StiReport();
      report.loadFile("/reports/SimpleList.mrt");
      // 將呈現(xiàn)的報告保存為JSON字符串
      var json = report.saveDocumentToJsonString();
      console.log("json", json);
      // 獲取報告文件名
      var fileName = report.reportAlias
        ? report.reportAlias
        : report.reportName;
      console.log("report.reportName", report.reportName);
      console.log("report.reportAlias", report.reportAlias);
      console.log("fileName", fileName);
      // 將數(shù)據(jù)保存到文件
      window.Stimulsoft.System.StiObject.saveAs(
        json,
        fileName + ".mdc",
        "application/json;charset=utf-8"
      );
    },
    // 獲取json數(shù)據(jù)并寫入頁面
    setJson() {
      var report = new window.Stimulsoft.Report.StiReport();

      // report.loadFile("/reports/SimpleList.mrt");// 官方數(shù)據(jù)模板
      report.loadFile("/reports/Test.mrt");// 自己的數(shù)據(jù)模板
      
      // 創(chuàng)建新的DataSet對象
      var dataSet = new window.Stimulsoft.System.Data.DataSet("JSON");
      // 將JSON數(shù)據(jù)文件從指定的URL加載到DataSet對象

      // dataSet.readJsonFile("/reports/Demo.json");//官方數(shù)據(jù)
      dataSet.readJsonFile("/reports/Test.json");// 自己的json數(shù)據(jù)
        
	  //文件用上面的readJsonFile方式導(dǎo)入，接口網(wǎng)絡(luò)請求用下面這種方式進(jìn)行導(dǎo)入
      // let json=/*此處省略獲取數(shù)據(jù)請求*/
      // dataSet.readJson(JSON.stringify(json));
        
      // 清除報告模板中數(shù)據(jù)
      report.dictionary.databases.clear();
        
      // 注冊數(shù)據(jù)集對象
      report.regData("JSON", "JSON", dataSet);
        
      // 用注冊數(shù)據(jù)呈現(xiàn)報表
      // report.render();
      // 工具欄
      var viewer = new window.Stimulsoft.Viewer.StiViewer(
        null,
        "StiViewer",
        false
      );
      // 創(chuàng)建報表
      viewer.report = report;
      // 注入標(biāo)簽
      viewer.renderHtml("viewer");
    },
  },
};
</script>

<style>
</style>