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 ドキュメント内でテキストの書式設定を行うことができます。 jsPDF ではスタイル設定に CSS が使用されないため、インライン、内部、および外部 CSS は機能しないことに注意してください。