Integrating the Report Designer into an Application
Unsere Beispiele der Projekte und Berichtsvorlagen helfen Ihnen, die Grundlagen der Arbeit mit unserer Software zu erlernen.This example shows how to integrate the report designer into a Vue.js application. First of all, load scripts:
Then, integrate the report designer into an application:
Auf dem Screenshot unten Sie können das Ergebnis des Beispiel-Codes ansehen:

<script src="/stimulsoft/stimulsoft.reports.js"></script>
<script src="/stimulsoft/stimulsoft.viewer.js"></script>
<script src="/stimulsoft/stimulsoft.designer.js"></script>
<script src="/stimulsoft/stimulsoft.blockly.js"></script>
Then, integrate the report designer into an application:
<script>
export default {
name: 'app',
data () {
return {
}
},
mounted: function() {
console.log('Loading Designer view');
console.log('Set full screen mode for the designer');
var options = new window.Stimulsoft.Designer.StiDesignerOptions();
options.appearance.fullScreenMode = false;
console.log('Create the report designer with specified options');
var designer = new window.Stimulsoft.Designer.StiDesigner(options, 'StiDesigner', false);
console.log('Create a new report instance');
var report = new window.Stimulsoft.Report.StiReport();
console.log('Load report from url');
report.loadFile('reports/SimpleList.mrt');
console.log('Edit report template in the designer');
designer.report = report;
console.log('Rendering the viewer to selected element');
designer.renderHtml('designer');
console.log('Loading completed successfully!');
}
}
</script>Auf dem Screenshot unten Sie können das Ergebnis des Beispiel-Codes ansehen:
