In diesem Tutorial werden wir Ihnen Angular vorstellen, ein von Google entwickeltes Framework. Zunächst werden wir ein neues Projekt von Grund auf beginnen und dann einige Dateien bearbeiten und erstellen, um unser eigenes PDF Merge Tool zu erstellen. Mit dem PDF Merge Tool können User PDF-Dateien hochladen, sie in der gewünschten Reihenfolge anordnen und dann zu einem einzigen PDF-Dokument zusammenführen.
Um ein Angular-Projekt von Grund auf neu zu erstellen, müssen Sie zunächst das Angular CLI über das Terminal installieren.
sudo npm install -g @angular/cli
Die Angular CLI bietet verschiedene Bash-Befehle zum Starten, Konfigurieren, Testen und Ausführen von Angular-Projekten.
Angular CLI ist nicht kompatibel mit der vorinstallierten Node.js-Version 18.05 in Codesphere. Daher müssen Sie die Node.js-Version mit dem folgenden Befehl im Terminal auf 18.10 ändern:
sudo n install 18.10
Sobald Sie dies erledigt haben, können Sie mit dem folgenden Befehl ein neues Angular-Projekt erstellen:
ng new pdf-merge
Bevor das neue Projekt initialisiert wird, fordert das Terminal Sie zu einer Benutzereingabe auf. Sie können alle Fragen mit Ja beantworten und bei der letzten Frage CSS auswählen. Das Projekt wird anschließend initialisiert, und alle wichtigen Dateien werden erstellt.
Nachdem das Projekt nun erstellt ist, können Sie das Angular-Template direkt im Serve-Modus deployen. Navigieren Sie dazu mit cd zum Projektordner und führen Sie den folgenden Befehl im Terminal aus:
cd pdf-merge/
ng serve --port 3000 --host 0.0.0.0 --public-host XXXXX-3000.2.codesphere.com
Es ist wichtig, dass Sie "XXXXX" durch Ihre Workspace-ID ersetzen, damit dies funktioniert. Sie können diese ID in der URL Ihres Workspace finden.
Nach der Verarbeitung können Sie das Deployment durchführen, und die Angular-Standardvorlage wird im neu geöffneten Fenster Ihres Browsers angezeigt.
Jetzt können Sie mit dem Programmieren beginnen. Wenn eine Datei bearbeitet und mit Strg + S gespeichert wird, werden alle Änderungen sofort im Browser angezeigt.
Wir müssen zwei neue Bibliotheken in unserem PDF Merge Tool-Projekt installieren. Öffnen Sie ein neues Terminal, navigieren Sie mit cd zum Projektordner und geben Sie die folgenden Befehle ein:
cd pdf-merge/
npm install @angular/cdk && npm install pdf-lib
pdf-lib ist eine Bibliothek zur Verarbeitung von PDFs, und @angular/cdk ist eine Bibliothek, mit der Sie unter anderem interaktive Drag-and-Drop-Listen erstellen können. Für beide Bibliotheken ist eine Dokumentation online verfügbar.
Nun, da die Abhängigkeiten installiert sind, können wir mit der Verwendung des Codes beginnen. Wir werden nun jede Datei durchgehen, die geändert oder erstellt werden muss. Es ist nicht kompliziert, wenn Sie wissen, wo Sie die einzelnen Änderungen vornehmen müssen. Fangen wir also an.
Der Ordner, der für uns relevant ist, ist der Ordner src. Er enthält den Quellcode, den wir selbst erstellen. Wenn Sie diesen Ordner öffnen, sehen Sie neben anderen Dateien die Datei style.css. In einer CSS-Datei können Sie die Designeinstellungen anpassen. Sie können den folgenden Code in die Datei kopieren:
body {
margin: 0;
background-color: #814BF6;
}
.header {
background-color: #110E27;
padding: 15px;
margin: 0; /* Spacing around the content */
text-align: center; /* Center content horizontally */
}
.header-logo {
display: inline-block; /* Change block element to inline-block */
width: 500px;
height: auto; /* Automatic height adjustment */
}
.header-title {
font-size: 24px;
color: #FFFFFF;
margin-top: 10px;
}
.main {
display: flex;
justify-content: center;
}
Als nächstes bearbeiten wir die Datei index.html, in der die Struktur der Webseite festgelegt ist. Sie können den folgenden Inhalt in die Datei kopieren:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PDF Merge Tool</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="assets/favicon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>
<body class="body">
<header class="header">
<h1 class="header-title">PDF Merge Tool</h1>
</header>
<main class="main">
<app-root>
<pdf></pdf>
</app-root>
</main>
</body>
</html>
Tipp: Wenn Sie neu in der Programmierung sind und nicht alles verstehen, können Sie den Code in ein LLM wie ChatGPT kopieren und das Modell bitten, Ihnen den Code zu erklären. Auf diese Weise können Sie eine Menge lernen, während Sie an Ihrem Projekt arbeiten.
Lassen wir den Ordner "Assets" zunächst einmal außen vor. Sie können diesen Ordner verwenden, um Bilder oder andere Elemente zu speichern, die Sie auf Ihrer Webseite verwenden möchten.
Nun können Sie den App-Ordner öffnen. Er enthält bereits einige Dateien. Im App-Ordner finden Sie alle Komponenten, die Sie in Ihrem Projekt erstellen oder importieren. In Angular können Sie Komponenten erstellen, die Sie nach Bedarf kombinieren und wiederverwenden können.
In der Datei app.module.ts müssen verschiedene Abhängigkeiten und verwendete Komponenten angegeben werden, damit die Komponenten korrekt funktionieren. Für den Anfang können Sie den folgenden Code kopieren und ihn durch den Code in Ihrer app.module.ts-Datei ersetzen:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { PdfComponent } from './pdf/pdf.component';
@NgModule({
declarations: [
AppComponent,
PdfComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Dieser Code importiert notwendige Module und deklariert Komponenten. Sie müssen ihn an die Komponenten und Module in Ihrem Projekt anpassen.
Löschen Sie in der Datei appmodule.html den vorhandenen Code und kopieren Sie den folgenden:
<pdf></pdf>
Sie fragen sich vielleicht, wozu das gut sein soll. Wir werden nun eine neue Komponente erstellen und sie so konfigurieren, dass diese Komponente mit diesem HTML-Tag aufgerufen werden kann.
Im Terminal können Sie einfach den folgenden Befehl einfügen. Vergewissern Sie sich, dass Sie sich im Projektordner im Terminal befinden:
ng g c pdf-upload
Mit diesem Befehl wird eine völlig neue Komponente erstellt, die in Ihrem Anwendungsordner als pdf-upload-Ordner abgelegt wird. Dieser Ordner wiederum enthält mehrere Dateien, die wir bearbeiten können.
Nun wollen wir die Logik für die Komponente mit TypeScript schreiben. Zu diesem Zweck bearbeiten wir die Datei pdf-upload.component.ts:
import { Component } from '@angular/core';
import { PDFDocument } from 'pdf-lib';
import { FormsModule } from '@angular/forms';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
@Component({
selector: 'pdf',
templateUrl: './pdf-upload.component.html',
styleUrls: ['./pdf-upload.component.css'],
})
export class AppPdfUploadComponent {
uploadedPdfs: File[] = [];
mergedPdf: Uint8Array | null = null;
// In Ihrer Angular-Komponente (z. B. app-pdf-upload.component.ts)
newFileName: string = 'neuer_dateiname.pdf'; // Standardwert für den Dateinamen
/**
* Coordinates the merging of multiple PDFs into a single PDF.
* Reads and processes the uploaded PDF files and stores the merged PDF.
*/
async coordinateMergePDFs() {
const pdfs = await Promise.all(this.uploadedPdfs.map(file => this.readPDF(file)));
this.mergedPdf = await this.mergePDFsIntoOne(pdfs);
}
async readPDF(file: File): Promise<Uint8Array> {
return new Promise<Uint8Array>((resolve, reject) => {
const reader = new FileReader();
reader.onload = (event) => {
if (event.target?.result) {
resolve(new Uint8Array(event.target.result as ArrayBuffer));
} else {
reject('Could not read the PDF file');
}
};
reader.readAsArrayBuffer(file);
});
}
/** this function is merging PDFs and return the PDFs data as a Unit8Array*/
async mergePDFsIntoOne(pdfs: Uint8Array[]): Promise<Uint8Array> {
const mergedPdf = await PDFDocument.create();
for (const pdfBytes of pdfs) {
const pdf = await PDFDocument.load(pdfBytes);
const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
copiedPages.forEach((page) => {
mergedPdf.addPage(page);
});
}
return await mergedPdf.save();
}
reorderFiles(event: any) {
const files: FileList = event.target.files;
for (let i = 0; i < files.length; i++) {
this.uploadedPdfs.push(files[i]);
}
this.coordinateMergePDFs();
}
downloadMergedPDF() {
if (!this.mergedPdf) {
return;
}
const blob = new Blob([this.mergedPdf], { type: 'application/pdf' });
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
document.body.appendChild(a);
a.style.display = 'none';
a.href = url;
// Verwenden Sie den Wert aus dem Textfeld als Dateinamen
a.download = this.newFileName; // Hier wird der Dateiname aus dem Textfeld verwendet
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
}
drop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.uploadedPdfs, event.previousIndex, event.currentIndex);
this.coordinateMergePDFs();
}
}
Dieser Code definiert das Verhalten und die Funktionalität Ihrer PDF-Zusammenführungskomponente. Sie ermöglicht es Ihnen, PDF-Dateien hochzuladen, sie zusammenzuführen und die zusammengeführte PDF-Datei mit einem bestimmten Dateinamen herunterzuladen. Außerdem unterstützt sie die Neuordnung hochgeladener PDFs per Drag-and-Drop.
Lassen Sie uns nun die CSS-Datei der Komponente bearbeiten, um ihren Stil zu definieren. Sie können die folgenden Stile hinzufügen, um das Aussehen der Komponente festzulegen:
.pdf-upload-zone {
border: 2px dashed #ccc;
padding: 20px;
text-align: center;
}
.drop-zone-label {
font-size: 18px;
}
.upload-controls {
margin-top: 20px;
text-align: center;
}
.merged-pdf {
margin-top: 20px;
}
.pdf-upload-zone {
/* ... */
transition: border 0.3s ease-in-out; /* Example of a transition animation */
}
.cdk-drop-list {
border: 2px dashed #ccc;
padding: 20px;
text-align: center;
}
.example-list {
display: flex;
justify-content: center;
align-items: center;
width: 500px;
max-width: 100%;
border: none;
min-height: 60px;
display: block;
background: #814BF6;
border-radius: 4px;
overflow: hidden;
font-family: Inter, sans-serif;
}
.example-box {
padding: 20px 10px;
border-bottom: solid 1px #ccc;
color: white;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
cursor: move;
background: #110E27;
font-size: 20px;
text-align: center;
font-family: Inter, sans-serif;
}
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-placeholder {
opacity: 0;
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.example-box:last-child {
border: none;
}
.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
Diese CSS-Stile definieren das Erscheinungsbild verschiedener Elemente innerhalb Ihrer PDF-Zusammenführungskomponente, einschließlich der Upload-Zone, Beschriftungen, Steuerelemente und der Drag-and-Drop-Liste. Sie können diese Stile weiter anpassen, um sie an die Designanforderungen Ihres Projekts anzupassen.
Schließlich müssen wir die Struktur im HTML-Code der Komponente definieren:
<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let pdf of uploadedPdfs" cdkDrag>{{pdf.name}}</div>
</div>
<div align-items="center" class="upload-controls">
<input type="file" (change)="reorderFiles($event)" multiple accept=".pdf">
</div>
<div *ngIf="mergedPdf" class="merged-pdf">
<h2>Merged PDF</h2>
<input type="text" [(ngModel)]="newFileName" placeholder="New Filename">
<button (click)="downloadMergedPDF()">Download Merged PDF</button>
</div>
Okay, wir haben jetzt unser PDF Merge Tool fertig geschrieben. Jetzt sollte das Merge Tool im Browser sichtbar sein. Wenn der Befehl ng serve zwischenzeitlich gestoppt wurde, können Sie ihn einfach im Terminal erneut ausführen:
ng serve --port 3000 --host 0.0.0.0 --public-host XXXXX-3000.2.codesphere.com
Wenn Sie nun auf den Button "Deployment" klicken, werden Sie zu Ihrem Online-PDF Merge Tool im Browser weitergeleitet. Herzlichen Glückwunsch, Ihre erste Angular-Anwendung ist jetzt online!
Es ist jedoch wichtig zu beachten, dass der Befehl ng serve nur zu Testzwecken verwendet werden sollte, da er Sicherheitsschwachstellen aufweisen kann.
Um eine fertige Webanwendung zu deployen, sollten Sie den folgenden Befehl verwenden:
ng build --port 3000 --host 0.0.0.0 --public-host XXXXX-3000.2.codesphere.com
In diesem Tutorial haben wir die Grundfunktionen von Angular behandelt und gelernt, wie man Angular-Projekte in Codesphere startet, bearbeitet und deployt. Angular ist ein vielseitiges Framework, und wir haben nur an der Oberfläche gekratzt. Um mehr über Angular zu erfahren, empfehle ich, YouTube-Videos anzuschauen, ChatGPT oder andere Sprachmodelle zu verwenden und vor allem, selbst aktiv zu experimentieren.
Wenn Sie Hilfe zu Angular auf Codesphere benötigen, können Sie uns gerne auf unserem Codesphere Community Discord Server kontaktieren: https://discord.gg/codesphere