Nextjs 및 ExpressJS와 함께 PDF로 연설을 전환합니다

이 기사에서는 Speech를 다운로드 가능한 PDF로 변환하는 Next.js 및 Express.js 응용 프로그램을 구축합니다. 이 speech-to-pdf 컨버터를 만드는 과정을 탐구합시다.

speact " 인터페이스는 기능을 탐색해야합니다. 이 프로젝트는 음성 단어를 다운로드 가능한 PDF 문서로 변환하는 것을 보여줍니다. 우리는이 기능을 달성하기 위해 여러 라이브러리를 활용합니다.

주요 기술 :

핵심 구성 요소는 Next.js 및 Express.js입니다. React 프레임 워크 인 Next.js는 서버 측 PDF 생성에 중요한 API 경로와 같은 기능을 제공합니다. Express.js는 데이터 처리 및 라우팅을 처리하기 위해 Node.js 서버의 생성을 용이하게합니다.

추가 종속성은 다음을 포함합니다. 다음 .js.

html-pdf-node : html을 pdf로 변환합니다.

axios : HTTP 요청을 관리합니다.

code :

설정 :

두 개의 프로젝트 폴더를 생성하는 것으로 시작합니다. 클라이언트를위한 하나 (예 : Audio-to-PDF-Client )와 서버 (예 : audio-to-pdf-server ).

Express.js 서버 설정 : 서버 폴더로 이동하고 실행하십시오.

npm init -y npm 설치 Express html-pdf-node cors 기본 익스프레스 서버가있는 서버 폴더에서 const express = ( "Express"); const app = express (); app.listen (4000, () = & gt; console.log ( "포트 4000"에서 실행되는 서버 ");

클라이언트 측 의존성 설치 :

 CD 오디오 투 -PDF-Client NPM 설치 Reacteech-recence-regenterator-untime axios 

client project and and an

speechtotext.jsx 파일 내부. pages/index.js 를 수정하려면 speechtotext 구성 요소를 가져오고 렌더링합니다.

UI 개발 :

speechtotext.jsx 구성 요소는 사용자 상호 작용을 처리합니다. 기본 구조에는 시작, 중지, 음성 인식 재설정 및 PDF로 변환 할 버튼이 포함됩니다. contenteditable div는 전사 된 텍스트를 표시합니다. (자세한 구성 요소 코드 및 CSS 스타일은 원본 기사를 참조하십시오). index.js 에서 필요한 모듈을 가져 오기 ( html-pdf-node , fs , cors , express.json () ), 사후 경로 (/)를 정의하십시오. 이 경로는 전사 된 텍스트를 수신하고 html-pdf-node 를 사용하여 PDF를 생성하고 파일 시스템에 저장하고 PDF를 클라이언트로 보냅니다. (완전한 서버 측 코드는 원본 기사를 참조하십시오).

클라이언트 측 변환 :

handleconversion 함수 speechtotext.jsx 는 API 요청을 Express Server에 요청합니다. 로드 상태, 오류 및 성공 메시지를 처리합니다. 성공적으로 변환하면 생성 된 PDF의 브라우저 다운로드를 트리거합니다. (자세한 handleconversion 함수에 대한 원본 기사를 참조하십시오. Next.js Development Server와 Express.js 서버를 별도로 실행해야합니다. 이 설정은 음성 -PDF 변환 기능을 테스트 할 수 있습니다.

위 내용은 Nextjs 및 ExpressJS와 함께 PDF로 연설을 전환합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!