@pantherpdf/cloud-editor-vue

PantherPDF Cloud Editor Vue component

PantherPDF is a report editor and PDF generator service for creating customized PDF reports.

This package is a thin wrapper around a cloud based editor for simplified integration into Vue 3 apps. There is also a React and Angular wrapper.

Underlying editor is open source and available here.

Installation

npm install --save @pantherpdf/cloud-editor-vue

Registration

Global registration

import Vue3CloudEditor from "@pantherpdf/cloud-editor-vue";

createApp(App)
  .use(router)
  .use(Vue3CloudEditor)
  .mount("#app");

OR

import { CloudEditor } from "@pantherpdf/cloud-editor-vue";

export default defineComponent({
  components: { CloudEditor },
});

Example using reportSecret:

Report data is stored on PantherPDF database.

<template>
  <CloudEditor
    reportSecret="..."
    style="width: 100%; height: 100vh;"
  />
</template>

Example using v-model:

Report data is stored on customer's database.

<template>
  <CloudEditor
    v-model="reportValue"
    editorKey="..."
    style="width: 100%; height: 100vh;"
  />
</template>

<script lang="ts">
  import type { ReportCloudData } from '@pantherpdf/cloud-editor-vue';
  import { defineComponent, ref } from 'vue'

  export default defineComponent({
    setup() {
      const reportValue = ref<ReportCloudData>(null);
      return {
        reportValue,
      };
    },
  });
</script>

Props

Parameter	Description
reportSecret	Access token for a report.
editorKey	Access token for editor.
lang	Editor language. Possible values: en (default, uses metric units) and en-us which uses imperial units.
model	ReportCloudData from customer's database.

License

MIT