vue-cli使用stimulsoft.reports.js的詳細教程

更新時間：2021年12月16日 17:14:52 作者：小C好好干飯

Stimulsoft?Reports.JS是一個使用JavaScript和HTML5生成報表的平臺。它擁有所有擁來設計，編輯和查看報表的必需組件。該報表工具根據(jù)開發(fā)人員數(shù)量授權(quán)而不是根據(jù)應用程序的用戶數(shù)量。接下來通過本文給大家介紹vue-cli使用stimulsoft.reports.js的方法，一起看看吧

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

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

以下是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ù)、導入json數(shù)據(jù)的功能測試

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

<script>
export default {
  name: "app",
  data() {
    return {};
  },
    // 加載官方示例模板代碼
  mounted: function () {
    console.log("加載查看器視圖");
    // 工具欄
    console.log("創(chuàng)建具有默認選項的報表查看器");
    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;

    // 注入標簽
    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();
    },
    // 導出保存數(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方式導入，接口網(wǎng)絡請求用下面這種方式進行導入
      // 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;
      // 注入標簽
      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

到此這篇關(guān)于vue-cli使用stimulsoft.reports.js的文章就介紹到這了,更多相關(guān)vue-cli使用stimulsoft.reports.js內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！