jspdf と HTML2Canvas を使用して、正しい CSS レンダリングと画像を含む PDF をエクスポートする方法

jspdf と HTML2Canvas を使用した CSS レンダリングによる PDF のエクスポート

問題: jspdf.debug.js を使用してエクスポートする場合Web サイトからデータを取得すると、エクスポートされた PDF で CSS がレンダリングされず、画像が空白で表示されるという問題が発生します。

解決策:

jspdf は CSS レンダリングをネイティブにサポートしていません。 。ただし、これは HTML2Canvas をプロセスに組み込むことで解決できます。

HTML2Canvas を使用すると、HTML 要素を Canvas 要素に変換でき、jspdf の addHTML メソッドを使用して PDF に追加できます。

コード:

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

実装:

HTML2Canvas JS を追加した後、jspdf の fromHTML メソッドを addHTML() に置き換えます。 ElementYouWantToConvertToPdf セレクターは、エクスポートする HTML 要素を指定する必要があります。

注: addHTML() メソッドが見つからない場合は、ドキュメントを参照して詳細を確認してください。

その他の考慮事項:

• HTML ファイルに HTML2Canvas スクリプトを必ず追加してください。
• PDF の寸法と要素の幅が適切に設定されていることを確認してください。
• コードを徹底的にテストして、要件を満たしていることを確認してください。

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