vue-cli使用stimulsoft.reports.js的過程是怎樣的

vue-cli使用stimulsoft.reports.js的過程是怎樣的，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

vue-cli使用stimulsoft.reports.js

第一部分：數(shù)據(jù)源準(zhǔn)備

以下是JSON數(shù)據(jù)的教程

json數(shù)據(jù)結(jié)構(gòu)

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

自己的測試JSON數(shù)據(jù)

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

附上官方處數(shù)據(jù)（自己刪減了一些數(shù)據(jù)讓讀者能更好看懂結(jié)構(gòu)）

{
	"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"
	}]
}

第二部分：vue-cli引入stimulsoft.reports.js

附上App.vue代碼
分別有展示數(shù)據(jù)、打印數(shù)據(jù)、保存數(shù)據(jù)、導(dǎo)入json數(shù)據(jù)的功能測試

<template>
  <div id="app">
    <div>
      <h3>Stimulsoft Reports.JS Viewer</h3>
      <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)用打印機打印數(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>

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。