stimulsoft-reports-js-vuejs 2025.2.1

package/viewer.d.ts

@@ -0,0 +1,13 @@
+import { Stimulsoft } from "./stimulsoft.reports"
+export { Stimulsoft };
+
+type ViewerProperties = {
+    report?: Stimulsoft.Report.StiReport;
+    visible?: boolean,
+    options?: Stimulsoft.Viewer.StiViewerOptions,
+    id?: string,
+}
+
+export declare class Viewer {
+    $props: ViewerProperties;
+}

package/viewer.js

@@ -0,0 +1,114 @@
+import { watch, h, onMounted, onUnmounted, useTemplateRef } from 'vue'
+import { } from "./stimulsoft.reports.engine.mjs";
+import { } from "./stimulsoft.reports.chart.mjs";
+import { } from "./stimulsoft.reports.export.mjs";
+import { } from "./stimulsoft.reports.import.xlsx.mjs";
+import { } from "./stimulsoft.reports.maps.mjs";
+import { Stimulsoft } from "./stimulsoft.viewer.mjs";
+export { Stimulsoft };
+
+export const Viewer = {
+    props: {
+        report: {
+            type: Stimulsoft.Report.StiReport,
+            default: null
+        },
+        visible: {
+            type: Boolean,
+            default: true
+        },
+        options: {
+            type: Stimulsoft.Viewer.StiViewerOptions,
+            default: null
+        },
+        id: {
+            type: String,
+            default: null
+        }
+    },
+    emits: ["prepareVariables", "beginProcessData", "endProcessData", "printReport", "beginExportReport", "endExportReport", "interaction", "emailReport", "designReport", "showReport", "openReport", "openedReport"],
+    setup(props, context) {
+        var viewer;
+        var parentRef = useTemplateRef('parentRef')
+
+        const createViewer = () => {
+            viewer = new Stimulsoft.Viewer.StiViewer(props.options, props.id, false);
+            viewer.renderHtml(parentRef.value);
+            bindEvents();
+
+            viewer.visible = props.visible;
+        }
+
+        const bindEvents = () => {
+            viewer.onPrepareVariables = (args, callback) => context.emit("prepareVariables", args, callback);
+            viewer.onBeginProcessData = (args, callback) => context.emit("beginProcessData", args, callback);
+            viewer.onEndProcessData = (args) => context.emit("endProcessData", args);
+            viewer.onPrintReport = (args) => context.emit("printReport", args);
+            viewer.onBeginExportReport = (args) => context.emit("beginExportReport", args);
+            viewer.onEndExportReport = (args) => context.emit("endExportReport", args);
+            viewer.onInteraction = (args) => context.emit("interaction", args);
+            viewer.onEmailReport = (args) => context.emit("emailReport", args);
+            viewer.onDesignReport = (args) => context.emit("designReport", args);
+            viewer.onShowReport = (args) => context.emit("showReport", args);
+            viewer.onOpenReport = (args, callback) => {
+                args.preventDefault = false;
+                context.emit("openReport", args, callback);
+            }
+            viewer.onOpenedReport = (args, callback) => context.emit("openedReport", args, callback);
+        }
+
+        onMounted(() => {
+            setTimeout(() => {
+                createViewer();
+                viewer.report = props.report;
+            });
+        });
+
+        onUnmounted(() => {
+            if (viewer != null)
+                viewer.dispose();
+        });
+
+        watch(
+            () => props.report,
+            () => {
+                if (viewer)
+                    viewer.report = props.report;
+            },
+            { immediate: true }
+        )
+
+        watch(
+            () => props.options,
+            () => {
+                if (viewer) {
+                    createViewer();
+                    viewer.report = props.report;
+                }
+            },
+            { immediate: true, deep: true }
+        )
+
+        watch(
+            () => props.visible,
+            () => {
+                if (viewer)
+                    viewer.visible = props.visible;
+            },
+            { immediate: true }
+        )
+
+        watch(
+            () => props.id,
+            () => {
+                if (viewer) {
+                    createViewer();
+                    viewer.report = props.report;
+                }
+            },
+            { immediate: true}
+        )
+
+        return () => h('div', { ref: "parentRef" })
+    }
+}