Detailliertes Tutorial zur Verwendung von stimulsoft.reports.js mit vue-cli

{
	"Name der Datenquelle":[
		// ...Datenliste ]
}

{
    "Daten": [
        {
            "a": "Ich bin A",
            "b": "Ich bin B",
            "c": "Ich bin C"
        },
        {
            "a": "Ich bin A",
            "b": "Ich bin B",
            "c": "Ich bin C"
        },
        {
            "a": "Ich bin A",
            "b": "Ich bin B",
            "c": "Ich bin C"
        }
    ]
}

{
	"Kunden": [{
		"Kunden-ID": "ALFKI",
		"CompanyName": "Alfreds Futterkiste",
		"ContactName": "Maria Anders",
		"ContactTitle": "Vertriebsmitarbeiter",
		"Adresse": "Obere Str. 57",
		"Stadt": "Berlin",
		"Region": null,
		"Postleitzahl": "12209",
		"Land": "Deutschland",
		"Telefon": "030-0074321",
		"Fax": "030-0076545"
	}, {
		"Kunden-ID": "ANATR",
		"Firmenname": "Ana Trujillo Emparedados und Helfer",
		"Kontaktname": "Ana Trujillo",
		"ContactTitle": "Eigentümer",
		"Adresse": "Avda. de la Constitución 2222",
		"Stadt": "México DF",
		"Region": null,
		"Postleitzahl": "05021",
		"Land": "Mexiko",
		"Telefon": "(5) 555-4729",
		"Fax": "(5) 555-3745"
	}]
}

<Vorlage>
  <div id="app">
    <div>
      <h2>Stimulsoft Reports.JS-Viewer</h2>
      <button @click="print">Drucken</button>
      <button @click="save">Speichern</button>
      <button @click="setJson">JSON festlegen</button>
      <div id="Betrachter"></div>
    </div>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "App",
  Daten() {
    zurückkehren {};
  },
    //Laden Sie den offiziellen Beispielvorlagencode, der gemountet ist: function () {
    console.log("Viewer-Ansicht wird geladen");
    // Symbolleiste console.log("Erstellen Sie einen Berichtsviewer mit Standardoptionen");
    var viewer = neues Fenster.Stimulsoft.Viewer.StiViewer(
      null,
      "StiViewer",
      FALSCH
    );

    // Bericht console.log("Neue Berichtsinstanz erstellen");
    var report = neues Fenster.Stimulsoft.Report.StiReport();

    // Datei laden console.log("Bericht von URL laden");
    report.loadFile("/reports/SimpleList.mrt");

    // Bericht erstellen console.log("Weisen Sie den Bericht dem Viewer zu. Der Bericht wird automatisch generiert, nachdem der Viewer gerendert wurde");
    viewer.report = Bericht;

    // Tag einfügen console.log("Rendering-Viewer für ausgewähltes Element");
    viewer.renderHtml("viewer");

    console.log("Laden erfolgreich abgeschlossen!");
  },
  Methoden: {
    //Drucker zum Drucken der Daten aufrufen print() {
      var report = neues Fenster.Stimulsoft.Report.StiReport();
      report.loadFile("/reports/SimpleList.mrt");
      bericht.drucken();
    },
    // Daten exportieren und speichern save() {
      var report = neues Fenster.Stimulsoft.Report.StiReport();
      report.loadFile("/reports/SimpleList.mrt");
      // Den gerenderten Bericht als JSON-String speichern var json = report.saveDocumentToJsonString();
      konsole.log("json", json);
      // Den Namen der Berichtsdatei abrufen var fileName = report.reportAlias
        ? Bericht.BerichtAlias
        : Bericht.Berichtsname;
      console.log("Bericht.Berichtsname", Bericht.Berichtsname);
      Konsole.log("Bericht.BerichtAlias", Bericht.BerichtAlias);
      console.log("Dateiname", Dateiname);
      // Daten in der Datei window.Stimulsoft.System.StiObject.saveAs( speichern
        json,
        Dateiname + ".mdc",
        „Anwendung/json;Zeichensatz=utf-8“
      );
    },
    // JSON-Daten abrufen und auf die Seite schreiben setJson() {
      var report = neues Fenster.Stimulsoft.Report.StiReport();

      // report.loadFile("/reports/SimpleList.mrt");// Offizielle Datenvorlage report.loadFile("/reports/Test.mrt");// Ihre eigene Datenvorlage// Erstellen Sie ein neues DataSet-Objekt var dataSet = new window.Stimulsoft.System.Data.DataSet("JSON");
      // Lade die JSON-Datendatei von der angegebenen URL in das DataSet-Objekt // dataSet.readJsonFile("/reports/Demo.json"); // Offizielle Daten dataSet.readJsonFile("/reports/Test.json"); // Deine eigenen JSON-Daten // Die Datei wird mit der oben genannten Methode readJsonFile importiert und die Netzwerkanforderung der Schnittstelle wird mit der folgenden Methode importiert // let json=/*Datenanforderung wird hier weggelassen*/
      // DatenSet.readJson(JSON.stringify(json));
        
      // Daten in der Berichtsvorlage löschen report.dictionary.databases.clear();
        
      // Datensatzobjekt registrieren report.regData("JSON", "JSON", dataSet);
        
      // Rendern Sie den Bericht mit den Registrierungsdaten // report.render();
      // Symbolleiste var viewer = neues Fenster.Stimulsoft.Viewer.StiViewer(
        null,
        "StiViewer",
        FALSCH
      );
      // Bericht erstellen viewer.report = report;
      //Tag einfügen viewer.renderHtml("viewer");
    },
  },
};
</Skript>

<Stil>
</Stil>