jsPDF를 사용한 스타일링 과제

jsPDF로 작업할 때 문서에 CSS를 적용하는 것은 좌절스러운 장애물이 될 수 있습니다. 그러나 문제의 핵심은 부적절한 파일 포함이나 오류에 있는 것이 아닐 수도 있습니다. jsPDF 문서에 따르면 CSS 스타일은 라이브러리에서 직접 지원되지 않습니다.

전통적으로 문서 내의 스타일 지정 요소에는 CSS 사용이 포함됩니다. 그러나 jsPDF는 다른 접근 방식을 취합니다. CSS에 의존하는 대신 개발자가 API를 통해 직접 텍스트 색상을 설정할 수 있습니다. 예를 들어 특정 색상으로 텍스트를 정의하려면 다음과 같은 코드를 사용할 수 있습니다.

doc.setTextColor(255, 0, 0);

이것은 RGB 값을 사용하여 텍스트 색상을 빨간색으로 설정합니다. . 다양한 다른 API 방법을 사용하여 텍스트 크기, 글꼴 및 기타 서식 옵션을 설정할 수도 있습니다.

예를 들어 빨간색 제목과 아래에 일반 크기의 녹색 텍스트가 있는 문서를 만들려면 다음 코드를 사용할 수 있습니다. :

var doc = new jsPDF('landscape');
doc.setFontSize(22);
doc.setTextColor(255, 0, 0);
doc.text(20, 20, 'This is a title');

doc.setFontSize(16);
doc.setTextColor(0, 255, 0);
doc.text(20, 30, 'This is some normal sized text underneath.');

이러한 방법을 활용하면 jsPDF 문서 내에서 텍스트 서식을 지정할 수 있습니다. 인라인, 내부 및 외부 CSS는 스타일 지정에 CSS를 활용하지 않으므로 jsPDF에서 작동하지 않습니다.