반응에서 jsPDF를 사용하고 스타일을 추가하는 방법은 무엇입니까?

jsPDF🤔란?

PDF를 생성하기 위한 JavaScript 라이브러리입니다.

설치

npm을 통해

npm install jspdf --save

또는 실

yarn add jspdf

어떻게 사용할 수 있습니까?

따라서 이 라이브러리를 사용하려면 새 인스턴스를 생성해야 합니다.

const doc = new jsPDF();

PDF의 형식, 방향 및 기타 옵션을 변경할 수 있습니다. 자세한 내용은 documentation에서 확인할 수 있습니다.

HTML에서 어떻게 PDF를 생성할 수 있습니까?

HTML에서 PDF를 생성하려면 html()이라는 메서드를 사용해야 합니다.

    doc.html(html_element, {
      async callback(doc) {
        // save the document as a PDF with name of pdf_name
        doc.save("pdf_name");
      }
    });

사용자 정의 글꼴을 어떻게 추가할 수 있습니까?

사용자 지정 글꼴을 추가하려면 원하는 글꼴 파일의 .ttf 버전이 필요합니다. 예를 들어 Google Font을 다운로드하면 다운로드한 각 글꼴에 대한 .ttf 파일을 받게 됩니다.

.ttf 파일이 있으면 사용하려는 각 글꼴(한 번에 하나씩)을 이 파일jsPDF Font Converter에 업로드해야 합니다.

참고: 이름, fontStyle 또는 모듈 형식을 입력할 필요가 없습니다. .ttf 글꼴 파일을 선택하면 자동으로 채워집니다.

"파일 선택"버튼을 클릭하고 .ttf 글꼴 파일을 선택합니다.



.ttf 파일을 선택한 후 "만들기"버튼을 클릭하기 전에 fontName 및 fontStyle 텍스트 상자에 나타나는 텍스트를 기록해 둡니다. 이 텍스트는 다음과 같이 setFont() 메서드와 함께 사용할 것입니다.

doc.setFont('Lato-Regular', 'normal');

fontName 및 fontStyle 텍스트를 기록한 후 "만들기"버튼을 클릭하고 JavaScript 파일을 안전한 곳에 저장합니다. 프로젝트의 출력 폴더에 포함하고 적절하게 링크해야 합니다.



PDF에서 여러 사용자 지정 글꼴을 사용하는 경우 각 글꼴에 대해 이 프로세스를 수행해야 합니다.

PDF에 스타일을 어떻게 적용할 수 있습니까?

인라인 스타일을 통해 html_element에 적용할 수 있습니다.

jsPDF 사용 예

CodeSandbox에 샌드박스를 만들었으니 확인해보세요 😁

결론

jsPDF를 사용하면 멋진 보고서와 인증서도 생성할 수 있습니다 😎. PDF로 멋진 작업을 수행할 수 있는 또 다른 멋진 라이브러리를 찾았다면 아래 댓글에서 공유할 수 있습니다 😁.

멋진 사람들을 유지하고 좋은 하루 보내세요 😎

추가 링크

How to use custom fonts with jsPDF - Devlin Peck

jsPDF - main page