ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript を使用して HTML Div から PDF を生成するにはどうすればよいですか?

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

Mary-Kate Olsen
リリース: 2024-12-04 03:16:10
オリジナル
320 人が閲覧しました
<p>How to Generate a PDF from an HTML Div Using JavaScript?

JavaScript を使用した Div 内の HTML コンテンツから PDF の生成

<p>特定の HTML div 要素のコンテンツを含む PDF ファイルを生成するには、JavaScript ライブラリを利用できます。 jsPDF。ただし、jsPDF のテキスト関数は文字列のみを受け入れるため、HTML レンダリングを有効にするために追加のプラグインを組み込む必要があります。

ステップ 1: 必要なプラグインを含める

<p>jsPDF Web サイトから、jsPDF の最新バージョンをダウンロードします。次のスクリプトをプロジェクト:

  • jspdf.js
  • jspdf.plugin.from_html.js
  • jspdf.plugin.s plit_text_to_size.js
  • jspdf.plugin.standard_fonts_metrics.js

ステップ2: 不要な要素を無視する

<p>PDF から特定の要素を除外する場合は、HTML コード内で一意の ID を割り当てます。次に、jsPDF の特別な要素ハンドラーを利用して、変換中にこれらの要素を無視できます。

<p>たとえば、ID が「ignorePDF」の要素を無視するには:

<p>
ログイン後にコピー

ステップ 3: HTML を変換するto PDF

<p>新しい jsPDF ドキュメントを作成し、作成した要素を無視する要素ハンドラー関数を定義します。

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
  }
);
ログイン後にコピー

ステップ 4: PDF を出力

<p>生成された PDF を新しいウィンドウに表示するには、次のコードを使用します。

doc.output("dataurlnewwindow");
ログイン後にコピー
<p>これは自動的にダウンロードされます。指定した div 要素の内容を含む「foobar.pdf」という名前の PDF ファイル。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート