Detailed tutorial of using stimulsoft.reports.js with vue-cli

{
	"Data Source Name":[
		// ...data list ]
}

{
    "data": [
        {
            "a": "I am A",
            "b": "I am B",
            "c": "I am C"
        },
        {
            "a": "I am A",
            "b": "I am B",
            "c": "I am C"
        },
        {
            "a": "I am A",
            "b": "I am B",
            "c": "I am 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 and Helpers",
		"ContactName": "Ana Trujillo",
		"ContactTitle": "Owner",
		"Address": "Avda. de la Constitución 2222",
		"City": "México DF",
		"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">Print</button>
      <button @click="save">Save</button>
      <button @click="setJson">Set JSON</button>
      <div id="viewer"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {};
  },
    // Load the official sample template code mounted: function () {
    console.log("Loading viewer view");
    // Toolbar console.log("Create a report viewer with default options");
    var viewer = new window.Stimulsoft.Viewer.StiViewer(
      null,
      "StiViewer",
      false
    );

    // Report console.log("Create a new report instance");
    var report = new window.Stimulsoft.Report.StiReport();

    // Load file console.log("Load report from url");
    report.loadFile("/reports/SimpleList.mrt");

    // Create report console.log("Assign the report to the viewer. The report will be automatically generated after the viewer is rendered");
    viewer.report = report;

    // Inject tag console.log("Rendering viewer to selected element");
    viewer.renderHtml("viewer");

    console.log("Loading completed successfully!");
  },
  methods: {
    //Call the printer to print data print() {
      var report = new window.Stimulsoft.Report.StiReport();
      report.loadFile("/reports/SimpleList.mrt");
      report.print();
    },
    // Export and save data save() {
      var report = new window.Stimulsoft.Report.StiReport();
      report.loadFile("/reports/SimpleList.mrt");
      // Save the rendered report as a JSON string var json = report.saveDocumentToJsonString();
      console.log("json", json);
      // Get the report file name var fileName = report.reportAlias
        ? report.reportAlias
        : report.reportName;
      console.log("report.reportName", report.reportName);
      console.log("report.reportAlias", report.reportAlias);
      console.log("fileName", fileName);
      // Save the data to the file window.Stimulsoft.System.StiObject.saveAs(
        json,
        fileName + ".mdc",
        "application/json;charset=utf-8"
      );
    },
    // Get json data and write it to the page setJson() {
      var report = new window.Stimulsoft.Report.StiReport();

      // report.loadFile("/reports/SimpleList.mrt");// Official data template report.loadFile("/reports/Test.mrt");// Your own data template// Create a new DataSet object var dataSet = new window.Stimulsoft.System.Data.DataSet("JSON");
      // Load the JSON data file from the specified URL to the DataSet object // dataSet.readJsonFile("/reports/Demo.json"); //Official data dataSet.readJsonFile("/reports/Test.json"); // Your own json data // The file is imported using the readJsonFile method above, and the interface network request is imported using the following method // let json=/*Data request is omitted here*/
      // dataSet.readJson(JSON.stringify(json));
        
      // Clear the data in the report template report.dictionary.databases.clear();
        
      // Register data set object report.regData("JSON", "JSON", dataSet);
        
      // Render the report using the registration data // report.render();
      // Toolbar var viewer = new window.Stimulsoft.Viewer.StiViewer(
        null,
        "StiViewer",
        false
      );
      // Create report viewer.report = report;
      //Inject tag viewer.renderHtml("viewer");
    },
  },
};
</script>

<style>
</style>