-cli使用stimulsoft.reports.（保姆級教程）

第一部分：資料來源準備

以下是JSON資料的教程

json資料結構

{
	"資料來源名":[
		// ...資料列表
	]
}

自己的測試JSON資料

{
    "data": [
        {
            "a": "我是A","b": "我是B","c": "我是C"
        },{
            "a": "我是A","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 Constitucin 2222",
 
		"City": "Mxico D.F.","PostalCode": "05021","Country": "Mexico","Phone": "(5) 555-4729","Fax": "(5) 555-3745"
	}]
}

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

附上App.vue程式碼
分別有展示資料、列印資料、儲存資料、匯入json資料的功能測試

<template>
  <div id="app">
    <div>
      <h2>Stimulsoft Reports.JS Viewer</h2>
      <button @click="print">列印<客棧
 
;/button>
      <button @click="save">儲存</button>
      <button @click="setJson">設定JSOkLWnzvTwN</button>
      <div id="viewer"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "app",data() {
    return {};
  },// 載入官方示例模板程式碼
  mounted: function () {
    console.log("載入檢視器檢視");
    // 工具欄
    console.log("建立具有預設選項的報表檢視器");
    var viewer = new window.Stimulsoft.Viewer.StiViewer(
      null,"StiViewer",f
 
alse
    );

    // 報表
    console.log("建立一個新的報表例項");
    var report = new window.Stimulsoft.Report.StiReport();

    // 載入檔案
    console.log("從url載入報告");
    report.loadFile("/reports/SimpleList.mrt");

    // 建立報表
    console.log("將報表分配給檢視器，報表將在呈現檢視器之後自動生成  ");
    viewer.report = report;

    // 注入標籤
    console.log("將檢視器呈現給選定的元素");
    viewer.renderHtml("viewer");

    console.log("載入成功完成!");
  },methods: {
    // 呼叫印表機列印資料
    print() {
      var report = new window.Stimulsoft.Report.StiReport();
      report.loadFile("/reports/SimpleList.mrt");
      report.print();
    },// 匯出儲存資料
    save() {
      var report = new window.Stimulsoft.Report.StiReport();
      report.loadFile("/reports/SimpleList.mrt");
      // 將呈現的報告儲存為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);
      // 將資料儲存到檔案
      window.Stimulsoft.System.StiObject.saveAs(
        json,fileName + ".mdc","application/json;charset=utf-8"
      );
    },// 獲取json資料並寫入頁面
    setJson() {
      var report = new window.Stimulsoft.Report.StiReport();

      // rhttp://www.cppcns.comeport.loadFile("/reports/SimpleList.mrt");// 官方資料模板
      report.loadFile("/reports/Test.mrt");// 自己的資料模板
      
      // 建立新的DataSet物件
      var dataSet = new window.Stimulsoft.System.Data.DataSet("JSON");
      // 將JSON資料檔案從指定的URL載入到DataSet物件

      // 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(
        null,false
      );
      // 建立報表
      viewer.report = report;
      // 注入標籤
      viewer.renderHtml("viewer");
    },},};
</script>

<style>
</style>

最後附上本人測試專案連線

專案連結
連結: https://pan.baidu.com/s/1HahzqHgFXvHT6OuE4IqzgQ

提取碼: vr57

工具連結

連結: https://pan.baidu.com/s/1374m-kCBZBeOdlDrAbXtbQ

提取碼: dfkc

官方教程連結
https://www.evget.com/serializedetail/510

到此這篇關於vue-cli使用stimulsoft.reports.js的文章就介紹到這了,更多相關vue-cli使用stimulsoft.reports.js內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！