Viewer Component - Export settings

<template>
  <div id="viewer-host">
    <JSViewer
      theme="ActiveReports"
      :report="{
        Uri: '/activereportsjs/demos/resource/reports/Frontstore.rdlx-json',
      }"
      :exportsSettings="exportsSettings"
      :sidebarVisible="true"
      :availableExports="availableExports"
    ></JSViewer>
  </div>
</template>

<script>
import { ref } from "vue";
import { Viewer } from "@mescius/activereportsjs-vue";
import "@mescius/activereportsjs/pdfexport";
import "@mescius/activereportsjs/htmlexport";
import "@mescius/activereportsjs/tabulardataexport";
import "@mescius/activereportsjs-i18n";
import Core from "@mescius/activereportsjs/core";

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

export default {
  components: {
    JSViewer: Viewer,
  },
  setup() {
    const availableExports = ref(["pdf", "html", "tabular-data"]);
    const exportsSettings = ref({
      pdf: {
        title: "ActiveReportsJS Sample",
        author: "GrapeCity",
        subject: "Web Reporting",
        keywords: "reporting, sample",
        userPassword: "pwd",
        ownerPassword: "ownerPwd",
        printing: "none",
        copying: false,
        modifying: false,
        annotating: false,
        contentAccessibility: false,
        documentAssembly: false,
        pdfVersion: "1.7",
        autoPrint: true,
        filename: "ActiveReportsJS-Sample.pdf",
      },
      html: {
        title: "ActiveReportsJS Sample",
        filename: "ActiveReportsJS-Sample.html",
        autoPrint: true,
        multiPage: true,
        embedImages: "external",
        outputType: "html",
      },
    });

    return {
      availableExports,
      exportsSettings,
    };
  },
};
</script>

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