PantherPDF Cloud Editor Angular 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 Angular apps. There is also a React and Vue wrapper.

Underlying editor is open source and available here.

Installation

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

Example using reportSecret:

Report data is stored on PantherPDF database.

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { PantherpdfCloudEditorComponent } from '@pantherpdf/cloud-editor-angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    PantherpdfCloudEditorComponent,
    CommonModule,
  ],
  template: `
    <pantherpdf-cloud-editor
      [reportSecret]="reportSecret"
    >
    </pantherpdf-cloud-editor>
  `,
  styles: [
    ':host pantherpdf-cloud-editor ::ng-deep iframe { width: 100%; height: 100vh; }'
  ],
})
export class AppComponent {
  reportSecret = '...';
}

Example using value:

Report data is stored on customer's database.

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { PantherpdfCloudEditorComponent, ReportCloudData } from '@pantherpdf/cloud-editor-angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    PantherpdfCloudEditorComponent,
    CommonModule,
  ],
  template: `
    <pantherpdf-cloud-editor
      [(value)]="reportValue"
      [editorKey]="editorKey"
    >
    </pantherpdf-cloud-editor>
  `,
  styles: [
    ':host pantherpdf-cloud-editor ::ng-deep iframe { width: 100%; height: 100vh; }'
  ],
})
export class AppComponent {
  editorKey: string;
  reportValue: ReportCloudData | null;

  constructor() {
    this.editorKey = '...';
    this.reportValue = null;
  }
}

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. | | [(value)] | ReportCloudData from customer's database. |

License

MIT