lux‐file‐preview v18 - IHK-GfI/lux-components GitHub Wiki

LUX-File-Preview

Beispielbild LUX-File-Preview Beispielbild LUX-File-Preview

Overview / API

Wichtig! Bevor die LuxFilePreview verwendet werden kann, muss das Projekt einmalig angepasst werden.

Datei Änderungen
package.json Im Abschnitt "dependencies" müssen die Abhängigkeiten "ng2-pdf-viewer": "x.x.x" und "pdfjs-dist": "x.x.x" ergänzt werden. Es müssen dieselben Versionen verwendet werden, welche auch von den LUX-Components im eigenen Projekt verwendet werden.

D.h. die entsprechenden Versionen können der Datei "package.json" der zum Projekt passenden LUX-Componentsversion (siehe Releases -> Asstes -> Source code (zip) -> "package.json") entnommen werden.

npm install im Anschluss nicht vergessen!
angular.json Die Datei "pdf.worker.min.mjs" muss in den Ordner "src/assets/pdf" kopiert werden.

Dazu muss in den assets-Abschnitten die folgende Zeile ergänzen:
{"glob":"pdf.worker.min.mjs", "input":"./node_modules/pdfjs-dist/build", "output":"./assets/pdf"}

Wichtig! Vor der Spring Boot-Version 3.4 muss die Datei in "pdf.worker.min.js" (node_modules/pdfjs-dist/build/) manuell in den Ordner "src/assets/pdf" kopiert und danach in "pdf.worker.min.js" umbenannt werden. mjs-Dateien werden vor Version 3.4 nicht als JavaScript interpretiert.
app.module.ts Im Abschnitt "imports" muss das LuxFilePreviewModule ergänzt werden.

Im Konstruktor oder in der Methode "ngDoBootstrap" muss der der PDF-Worker verlinkt werden. Dazu muss die folgende Zeile ergänzt werden:
(window as any).pdfWorkerSrc = '/assets/pdf/pdf.worker.min.mjs';

Wichtig! Vor der Spring Boot-Version 3.4 muss die folgende Zeile ergänzt werden:
(window as any).pdfWorkerSrc = '/assets/pdf/pdf.worker.min.js';

Allgemein

Name Beschreibung
import LuxFilePreviewModule
selector lux-file-preview

Classes / Services

LuxFilePreviewService

Name Beschreibung
open(config: LuxFilePreviewConfig): LuxFilePreviewRef Öffnet die Dateivorschau.

LuxFilePreviewRef

Name Beschreibung
close(): void Schließt die Dateivorschau.

LuxFilePreviewConfig

Name Typ
previewData LuxFilePreviewData

LuxFilePreviewData

Name Typ
fileComponent LuxFormFileBase
fileObject ILuxFileObject

Beispiel

Wichtig! Bitte alle Hinweise auf dem Tab "Overview / API" beachten!!!

Beispielbild 01-01 Beispielbild 01-02

Ts

  @ViewChild('fileListComponent', { static: false }) fileComponent!: LuxFileListComponent;

  viewActionConfig: ILuxFileActionConfig = {
    disabled: false,
    hidden  : false,
    iconName: 'lux-interface-edit-view',
    label   : 'Ansehen',
    onClick : (fileObject: ILuxFileObject) => {
      this.filePreviewService.open({
        previewData: {
          fileComponent: this.fileComponent,
          fileObject   : fileObject
        }
      });
    }
  };

  form: FormGroup;

  constructor(private filePreviewService: LuxFilePreviewService) {
    this.form = new FormGroup({
      file: new FormControl<ILuxFileObject[] | null>(null)
    });
  }

Html

<form [formGroup]="form">
  <lux-file-list
    luxLabel="Bescheinigung"
    luxControlBinding="file"
    [luxViewActionConfig]="viewActionConfig"
    #fileListComponent
  ></lux-file-list>
</form>
⚠️ **GitHub.com Fallback** ⚠️