So exportieren Sie den Inhalt von Angular-Seiten mit der Kendo-Benutzeroberfläche in PDF

Blog

Wenn Sie auf der Suche nach einer einfachen Lösung für den reibungslosen Export des HTML-Inhalts aus Ihrer Angular-Anwendung in ein PDF , dann ist dies der richtige Beitrag für Sie. Es kann aus verschiedenen Gründen erforderlich sein, HTML-Inhalte in PDF zu exportieren. Dies reicht von der Weitergabe an andere, ohne unbedingt auf das Internet zuzugreifen, bis hin zum Speichern nur zu Dokumentationszwecken.

Das Erstellen einer Lösung für eine solche Komponente kann zeitaufwändig sein, wenn Sie alles selbst erstellen. In diesem Beitrag zeige ich Ihnen, wie Sie dies einfach erreichen können, indem Sie die PDF-Exportkomponente von Kendo UI nutzen.

Wir werden eine Angular-Anwendung mit einigen Dummy-Inhalten erstellen und eine Kendo-UI-Schaltfläche hinzufügen, um den Inhalt direkt in PDF zu exportieren, wie hier gezeigt:

wie man ein aol passwort wiederherstellt

Angular-CLI . installieren

Bevor Sie eine Angular-Anwendung erstellen, müssen Sie zuerst die Winkel-CLI wenn es noch nicht auf Ihrem Computer vorhanden ist. Öffnen Sie ein Terminal und führen Sie dazu den folgenden Befehl aus:

component

Dadurch wird die Angular-CLI global auf Ihrem Computer hinzugefügt.

Angular-Anwendung erstellen

Sie können nun mit dem Erstellen einer neuen App für diesen Beitrag fortfahren, indem Sie den folgenden Befehl ausführen, um eine Anwendung mit dem Namen kendo-angular-export-pdf zu generieren:

./src/app/app.component.html

Wechseln Sie nach Abschluss des Installationsvorgangs das Verzeichnis in das neu erstellte Projekt wie unten gezeigt und starten Sie die Anwendung:

component

Möglicherweise wird in Ihrer Konsole ein Fehler mit der folgenden Meldung angezeigt:

./src/app/app.component.css

Das ist bekannt Problem auf GitHub und es liegt an mangelnder Kompatibilität zwischen der aktuellen Version von Typoskript auf Ihrem Computer und rxjs . Der schnelle Weg, dies zu beheben, besteht darin, den Ordner node_modules zu löschen. Öffnen Sie nun die Datei package.json und bearbeiten Sie im Abhängigkeitsobjekt die rxjs, indem Sie ^ entfernen:

npm install -g @angular/cli 

Speichern Sie die Datei und führen Sie den Befehl npm install erneut aus. Sobald der Installationsvorgang abgeschlossen ist, können Sie nun mit dem Starten der Anwendung mit ng serve fortfahren.

Dadurch wird Ihre Anwendung kompiliert und der Entwicklungsserver gestartet. Um die Standardseite dieser Angular-Anwendung anzuzeigen, navigieren Sie zu http://localhost:4200 von Ihrem Lieblingsbrowser und Sie werden Folgendes sehen:

PDF-Exportkomponente aus der Kendo-Benutzeroberfläche hinzufügen

Als Nächstes müssen wir die PDF-Exportkomponente hinzufügen, bevor wir sie in unserer Anwendung verwenden können. Um dies zu erreichen, verwenden wir den Befehl ng add, um das Paket wie hier gezeigt anzufordern und zu installieren:

Prüfen Sie, ob die Zeichenfolge leer ist Javascript
ng new kendo-angular-export-pdf 

Dadurch werden sowohl PDFExportModule als auch BrowserAnimationsModule in die Datei app.module.ts importiert und hinzugefügt:

// change directory cd kendo-angular-export-pdf // start the application ng serve 

Verwenden Sie die Kendo PDF-Exportkomponente

Nachdem Sie das PDF-Exportpaket installiert haben, können Sie nun mit dem Exportieren von Inhalten in unserer Angular-Anwendung in PDF fortfahren, indem Sie sie in |_+_| platzieren. Öffnen |_+_| und ersetzen Sie den Inhalt durch:

ERROR in node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: ';' expected. node_modules/rxjs/internal/types.d.ts(81,74): error TS1005: ';' expected. node_modules/rxjs/internal/types.d.ts(81,77): error TS1109: Expression expected. 

Hier haben wir Dummy-Inhalte hinzugefügt und mit |_+_| umschlossen. Als nächstes haben wir eine Schaltfläche hinzugefügt und ein Klickereignis daran angehängt. Sobald die Schaltfläche angeklickt wurde, haben wir die Methode saveAs() aufgerufen, um die generierte Datei zu speichern. Die Datei wird unter dem Namen gespeichert, der als Argument an die Methode saveAs() übergeben wird.

Um der Seite schließlich einen Standardstil zu verleihen, fügen Sie den folgenden Inhalt zu |_+_| . hinzu Datei:

 'dependencies': { ... 'rxjs': '6.0.0', // remove the `^` 'zone.js': '^0.8.26' }, 

Fahren Sie nun damit fort, die Anwendung erneut zu starten, indem Sie ng serve vom Terminal aus im Verzeichnis der Anwendung ausführen. Wenn

die Anwendung wird erstellt und bereitgestellt auf http://localhost:4200 du wirst das sehen:

Der hier angezeigte Inhalt stammt aus unserer Angular-Anwendung. Um die Exportfunktionalität von HTML-Inhalten zu testen, klicken Sie auf die Kendo-Schaltfläche mit dem Text Als PDF exportieren. Öffnen Sie nun die heruntergeladene PDF-Datei:

Cool, oder? Dies ist der Inhalt unserer Seite, der ohne großen Aufwand in PDF exportiert wird. Aber bei einem genauen Blick auf die PDF-Datei werden Sie mir zustimmen, dass etwas nicht stimmt. Der Inhalt sieht nicht richtig organisiert aus. Wir werden das ändern, indem wir im nächsten Abschnitt ein wenig Spielraum hinzufügen.

Papierformat und Rand hinzufügen

Die API der Kendo PDF-Exportkomponente ermöglicht uns die einfache Anpassung und Angabe der Papiergröße des PDF-Dokuments. Im Moment ist es auf die Standardeinstellung Auto eingestellt, was bedeutet, dass das Papierformat durch den Inhalt bestimmt wird.

Ersetzen wir den Inhalt von ./src/app/app.component.html durch:

ng add @progress/kendo-angular-pdf-export 

Wir haben dem zwei Datenattribute hinzugefügt, nämlich:

Javascript-String zum Fließen
  • paperSize: Wir stellen dies auf A4 ein.
  • Marge: Wir setzen dies auf 2cm.

Überprüfen Sie die Seite erneut und klicken Sie auf die Schaltfläche Als PDF exportieren. Öffnen Sie nun Ihre heruntergeladene PDF-Datei und Sie werden feststellen, dass sie viel besser aussieht, wie unten gezeigt:

Abschluss

Die hier gezeigte Kendo PDF-Exportkomponente ist eine Lösung zum Exportieren und Bearbeiten von HTML-Inhalten in PDF. Dies ist praktisch, wenn Sie schnell eine Seite aus Ihrer Angular-Anwendung als PDF-Dokument speichern müssen.

Wir haben hier kaum an der Oberfläche gekratzt, denn beim Exportieren von HTML-Inhalten in PDF bietet das Kendo-UI-Team so viel mehr Funktionalität. Fühlen Sie sich frei, die API zu erkunden, indem Sie die Link hier für weitere Details .

Hoffentlich haben Sie viel aus diesem Beitrag gelernt. Überprüfen Sie den Quellcode hier auf GitHub .

Danke fürs Lesen

Wenn dir dieser Beitrag gefallen hat, teile ihn mit all deinen Programmierfreunden!

Folge uns auf Facebook | Twitter

Weitere Informationen zu Angular

Angular 8 (ehemals Angular 2) - Das komplette Handbuch

Angular & NodeJS - Der MEAN Stack Guide

Der komplette Node.js-Entwicklerkurs (3. Auflage)

Das Bootcamp für Webentwickler

Die 50 besten Angular-Interview-Fragen für Frontend-Entwickler im Jahr 2019

Netflix aktiviert Ihr Gerät

☞ So erstellen Sie eine CRUD-Web-App mit Angular 8.0

☞ React vs Angular: Ein eingehender Vergleich

React vs Angular vs Vue.js am Beispiel

☞ Microfrontends – Verbindung von JavaScript-Frameworks (React, Angular, Vue usw.)

☞ Erstellen einer mobilen CRUD-App mit Ionic 4, Angular 8

☞ So erstellen Sie mobile Apps mit Angular, Ionic 4 und Spring Boot

☞ Ionic 4 & Angular Tutorial für Anfänger - Crashkurs

#eckig #html #web-entwicklung

www.telerik.com

So exportieren Sie den Inhalt von Angular-Seiten mit der Kendo-Benutzeroberfläche in PDF

In diesem Tutorial erfahren Sie, wie Sie Seiten mit HTML-Inhalten innerhalb Ihrer Angular-Anwendung einfach exportieren. Dies sollte eine komplexe Aufgabe sein, aber dank einer Kendo-UI-Komponente ist es einfach