Konvertierung der Sprache in PDF mit NextJs und ExpressJs

In diesem Artikel wird untersucht, wie ein Next.js- und Express.js -Anwendung erstellt wird, der die Sprache in ein herunterladbares PDF umwandelt. Lassen Sie uns mit dem Prozess des Erstellens dieses Sprach-PDF-Konverters eintauchen.

Die zunehmende Prävalenz von Sprachschnittstellen erfordert die Erforschung ihrer Fähigkeiten. Dieses Projekt zeigt, wie gesprochene Wörter in ein herunterladbares PDF -Dokument konvertieren. Wir werden mehrere Bibliotheken nutzen, um diese Funktionalität zu erreichen.

Schlüsseltechnologien:

Die Kernkomponenten sind als nächstes.js und express.js. Next.js, ein React-Framework, bietet Funktionen wie API-Routen, die für unsere serverseitige PDF-Generation von entscheidender Bedeutung sind. Express.js erleichtert die Erstellung eines Node.js -Servers, um die Datenverarbeitung und -routing zu verarbeiten.

Weitere Abhängigkeiten sind:

1. react-speech-recognition : Konvertiert Sprache in den Text in React-Komponenten.
2. regenerator-runtime : Die angesprochene potenzielle "RegeneratorRuntime ist nicht definiert" Fehler in Next.js.
3. html-pdf-node : Verwandelt HTML in eine PDF.
4. axios : Verwaltet HTTP -Anfragen.
5. cors : Ermöglicht die Freigabe von Cross-Origin-Ressourcen.

Projekt -Setup:

Beginnen Sie mit zwei Projektordnern: einen für den Client (z. B. audio-to-pdf-client ) und eine für den Server (z. B. audio-to-pdf-server ).

Initialisieren Sie den nächsten.js -Kunden:

 NPX erstellen next-App-Audio-zu-PDF-Client

Richten Sie den Server Express.js ein: Navigieren Sie zum Serverordner und führen Sie aus:

 npm init -y
NPM express html-pdf-node cors installieren

Erstellen index.js im Serverordner mit einem Basic Express -Server:

 const express = require ("express");
const App = express ();
app.Listen (4000, () => console.log ("Server auf Port 4000"));

Installieren Sie clientseitige Abhängigkeiten:

 CD Audio-to-PDF-Client
NPM Installation React-Speech-Recognition Regenerator-Runtime Axios

Erstellen Sie einen components innerhalb des Client -Projekts und eine SpeechToText.jsx -Datei darin. Ändern Sie pages/index.js um die SpeechToText zu importieren und zu rendern.

UI -Entwicklung:

Die Komponente SpeechToText.jsx wird die Benutzerinteraktion behandeln. Eine Grundstruktur umfasst Schaltflächen zum Starten, Stoppen, Zurücksetzen der Spracherkennung und Umwandlung in PDF. Ein contenteditable Div zeigt den transkribierten Text an. (Weitere Informationen zum detaillierten Komponentencode und des CSS -Stylings finden Sie im Originalartikel.)

Serverseitige API-Route:

Der Express.js -Server wird die PDF -Generation behandeln. Importieren Sie in index.js die erforderlichen Module ( html-pdf-node , fs , cors , express.json() ) und definieren Sie eine Postroute ( / ). Diese Route empfängt transkribierten Text, generiert einen PDF mit html-pdf-node , speichert ihn am Dateisystem und sendet die PDF an den Client. (Siehe Originalartikel für den vollständigen serverseitigen Code).

Client-Seite-Konvertierung:

Die handleConversion -Funktion in SpeechToText.jsx stellt eine API -Anforderung an den Express -Server. Es behandelt Ladezustände, Fehler und Erfolgsnachrichten. Bei erfolgreicher Konvertierung löst es einen Browser -Download des generierten PDF aus. (Der ursprüngliche Artikel für die detaillierte handleConversion -Funktion).

Letzte Schritte:

Der vollständige Code sowohl für den Client als auch für den Server finden Sie in GitHub (Links im Originalartikel). Denken Sie daran, sowohl den nächsten.js Development Server als auch den Express.js -Server separat auszuführen. Mit diesem Setup können Sie die Sprach-PDF-Konvertierungsfunktionalität testen.

Das obige ist der detaillierte Inhalt vonKonvertierung der Sprache in PDF mit NextJs und ExpressJs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!