JSPDF と Html2Canvas を使用して PDF 内の CSS と画像をレンダリングする方法

JSPDF を使用した CSS と画像のレンダリング

jspdf.debug.js を使用してデータを PDF にエクスポートする場合、CSS と画像のレンダリングで問題が発生することがよくあります。この記事では、これらの問題を解決する解決策を提供します。

まず、jspdf は、エクスポートされた PDF 内での CSS レンダリングをネイティブにサポートしていません。この制限を克服するには、Html2Canvas を利用することをお勧めします。

Html2Canvas を実装するには、次の手順に従います。

1. プロジェクトに Html2Canvas JavaScript ライブラリを含めます。
2. コード内の pdf.fromHTML() を pdf.addHTML() に置き換えます。このメソッドは、変換する HTML 要素を最初のパラメータとして受け入れ、コールバック関数を 2 番目のパラメータとして受け入れます。

Html2Canvas を統合したコードの更新バージョンは次のとおりです。

var pdf = new jsPDF('p', 'pt', 'letter');
pdf.addHTML($('#ElementYouWantToConvertToPdf')[0], function () {
    pdf.save('Test.pdf');
});

Html2Canvas を使用すると、CSS スタイルや画像などの Web ページ要素を PDF に効果的に変換できます。

以上がJSPDF と Html2Canvas を使用して PDF 内の CSS と画像をレンダリングする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。