Designer Component - Preview Reports Output

loading...
<template>
  <div>
    <div id="designer-toolbar" class="container-fluid">
      <div class="row mt-3 mb-3">
        <button
          type="button"
          class="btn btn-outline-primary btn-sm col-sm-2 ml-1"
          @click="onPdfPreview"
          :style="{ display: designerHidden ? 'none' : 'block' }"
        >
          PDF Preview
        </button>

        <button
          type="button"
          class="btn btn-outline-primary btn-sm col-sm-2 ml-1"
          @click="onDesignerOpen"
          :style="{ display: designerHidden ? 'block' : 'none' }"
        >
          Open Designer
        </button>
      </div>
    </div>
    <div
      id="designer-host"
      :style="{ display: designerHidden ? 'none' : 'block' }"
    >
      <ReportDesigner
        ref="reportDesigner"
        :report="{ id: 'reports/company-template.rdlx-json' }"
        :onRender="onReportPreview"
      />
    </div>
    <div
      id="viewer-host"
      :style="{ display: designerHidden ? 'block' : 'none' }"
    >
      <ReportViewer ref="reportViewer" />
    </div>
  </div>
</template>

<script>
import { Viewer, Designer } from "@mescius/activereportsjs-vue";
import Core from "@mescius/activereportsjs/core";
import { exportDocument as pdfExport } from "@mescius/activereportsjs/pdfexport";

export default {
  components: {
    ReportViewer: Viewer,
    ReportDesigner: Designer,
  },
  data() {
    return {
      designerHidden: false,
    };
  },
  methods: {
    async onPdfPreview() {
      const reportInfo = await this.$refs.reportDesigner.getReport();
      const report = new Core.PageReport();
      await report.load(reportInfo.definition);
      const doc = await report.run();
      const result = await pdfExport(doc);
      result.download("exportedreport");
    },
    onDesignerOpen() {
      this.designerHidden = false;
    },
    async onReportPreview(report) {
      this.designerHidden = true;
      this.$refs.reportViewer.Viewer().open(report.definition);
    },
  },
};

Core.FontStore.registerFonts("/activereportsjs/demos/resource/fontsConfig.json");
</script>

<style>
@import url("/activereportsjs/demos/arjs/styles/ar-js-ui.css");
@import url("/activereportsjs/demos/arjs/styles/ar-js-designer.css");
@import url("/activereportsjs/demos/arjs/styles/ar-js-viewer.css");

#designer-host,
#viewer-host {
  width: 100%;
  height: 500px;
}
</style>