Rumah >hujung hadapan web >tutorial css >Menukar Ucapan ke PDF dengan NextJS dan ExpressJS

Menukar Ucapan ke PDF dengan NextJS dan ExpressJS

Joseph Gordon-Levitt
Joseph Gordon-Levittasal
2025-03-11 10:45:12888semak imbas

Artikel ini meneroka membina aplikasi Next.js dan Express.js yang menukarkan ucapan kepada PDF yang boleh dimuat turun. Mari kita menyelidiki proses membuat penukar ucapan-ke-pdf ini. Kelaziman antara muka ucapan memerlukan meneroka keupayaan mereka. Projek ini menunjukkan menukarkan kata -kata yang dituturkan ke dalam dokumen PDF yang boleh dimuat turun. Kami akan memanfaatkan beberapa perpustakaan untuk mencapai fungsi ini.

Teknologi utama:

Komponen teras adalah Next.js dan Express.js. Next.js, rangka kerja React, menyediakan ciri-ciri seperti laluan API, penting untuk penjanaan PDF pelayan kami. Express.js memudahkan penciptaan pelayan node.js untuk mengendalikan pemprosesan dan penghalaan data.

Ketergantungan tambahan termasuk:

  • Next.js. Persediaan:

    Mulailah dengan membuat dua folder projek: satu untuk pelanggan (contohnya, audio-to-pdf-client ) dan satu untuk pelayan (contohnya, audio-to-pdf-server ). audio-to-pdf-client

    Sediakan pelayan Express.js: navigasi ke folder pelayan dan jalankan:

     npm init -y npm pemasangan express html-pdf-node cors 
    const app = express (); app.listen (4000, () = & gt; console.log ("Pelayan berjalan pada port 4000"));

    Pasang klien-side-side:

    SpeechTotext.jsx fail di dalamnya. Ubah suai halaman/index.js untuk mengimport dan menjadikan komponen pembangunan ui: Struktur asas termasuk butang untuk memulakan, menghentikan, menetapkan semula pengiktirafan ucapan, dan menukar kepada PDF. A contentedable Div memaparkan teks yang ditranskripsikan. (Rujuk artikel asal untuk kod komponen terperinci dan gaya CSS). Laluan API sisi pelayan:

    Pelayan Express.js akan mengendalikan penjanaan PDF. Dalam index.js , import modul yang diperlukan ( html-pdf-node , fs , cors , express.json () ), dan tentukan laluan pos (/). Laluan ini menerima teks yang ditranskripsikan, menghasilkan PDF menggunakan html-pdf-node , menyimpannya ke sistem fail, dan menghantar PDF kepada klien. (Lihat artikel asal untuk kod pelayan yang lengkap).

    Penukaran sisi klien:

    handleConversion berfungsi dalam speechtotext.jsx Membuat permintaan API ke pelayan Express. Ia mengendalikan keadaan pemuatan, kesilapan, dan mesej kejayaan. Apabila penukaran yang berjaya, ia mencetuskan muat turun penyemak imbas PDF yang dihasilkan. (Lihat artikel asal untuk fungsi

    Langkah -langkah akhir:

    Kod lengkap untuk kedua -dua klien dan pelayan boleh didapati di GitHub (pautan yang disediakan dalam artikel asal). Ingatlah untuk menjalankan kedua -dua pelayan pembangunan seterusnya dan pelayan Express.js secara berasingan. Persediaan ini membolehkan anda menguji fungsi penukaran pertuturan-ke-PDF.

  • Atas ialah kandungan terperinci Menukar Ucapan ke PDF dengan NextJS dan ExpressJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

    Kenyataan:
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn