JavaScript を使用して Div 内の HTML から PDF を生成するにはどうすればよいですか?-jsチュートリアル-php.cn

JavaScript を使用して Div 内の HTML から PDF を生成するにはどうすればよいですか?

Linda Hamilton

リリース： 2024-12-08 10:51:13

オリジナル

653 人が閲覧しました

How to Generate a PDF from HTML within a Div using JavaScript?

JavaScript を使用して div の HTML から PDF を生成する

実行する必要があるタスクは、ID を持つ div のコンテンツを変換することです「pdf」を PDF ドキュメントに変換します。この PDF ドキュメントは、ファイル名「foobar.pdf」で自動的にダウンロードされる必要があります。

jspdf は PDF の生成に一般的に使用されますが、そのテキスト機能の制限には課題があります。 HTML 入力が必要であるのに対し、文字列値のみを受け入れます。この問題に対処するには、jspdf.plugin.from_html.js や jspdf.plugin.split_text_to_size.js などのプラグインが必要です。これらのプラグインを使用して望ましい結果を達成する方法は次のとおりです:

必要なスクリプトをプロジェクトに組み込むことから始めます:

jspdf.js
jspdf.plugin.from_html.js
jspdf.plugin.split_text_to_size.js
jspdf.plugin.standard_fonts_metrics.js

ログイン後にコピー

特定の要素が必要な場合PDF から除外するには、ID を割り当てて、jsPDF の特別な要素ハンドラー内で識別する必要があります。たとえば、ID が「ignorePDF」の要素を除外するには、HTML コードを次のように変更します。

<!DOCTYPE html>
<html>
  <body>
    <p>

ログイン後にコピー

次の JavaScript コードは PDF を生成し、ポップアップに表示します。 window:

var doc = new jsPDF();          
var elementHandler = {
  '#ignorePDF': function (element, renderer) {
    return true;
  }
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
    source,
    15,
    15,
    {
      'width': 180,'elementHandlers': elementHandler
    });

doc.output("dataurlnewwindow");

ログイン後にコピー

このメソッドは、「print this to」というテキストを含む PDF を作成します。 pdf."

現在のバージョンでは、特別な要素ハンドラーが主に ID を処理することに注意することが重要です。したがって、クラスセレクター (例: '.ignorePDF') を使用しても、意図した結果は生成されません。

さらに、jsPDF には CSS スタイルのサポートがなく、テキストノード内のテキストのみが印刷されます。したがって、テキストエリアや同様の要素の値は PDF には含まれません。

以上がJavaScript を使用して Div 内の HTML から PDF を生成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。