stimulsoft-reports-js-vuejs/viewer.js

Stimulsoft Reports.JS is a reporting tool for VueJs

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" })
    }
}