コミュニティ学ぶツールライブラリレジャー

日本語

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

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

Linda Hamilton

リリース： 2024-11-30 02:01:11

オリジナル

360 人が閲覧しました

How Can I Generate a PDF from an HTML Div Using JavaScript and jsPDF?

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

問題

必要な ID が「pdf」の div を含む HTML コードがあります。 JavaScript を使用して「foobar.pdf」という名前の PDF ファイルに印刷します。ただし、jspdf は文字列値のみを受け入れ、HTML を印刷する機能はありません。

解決策

jsPDF で HTML を印刷できるようにするには、次のプラグインをプロジェクト:

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

さらに、無視したい場合は、 HTML 内の特定の要素を ID でマークし、jsPDF の特別な要素ハンドラーを使用して、それらの要素を印刷から除外できます。たとえば、無視された要素を含む更新された HTML コード:

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

ログイン後にコピー

JavaScript コード

この JavaScript コードは、「pdf」 div のコンテンツを含む PDF を生成し、新しいウィンドウ:

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");

ログイン後にコピー

メモ

要素 ID のみを使用できます。要素ハンドラーでの除外。クラスセレクターはサポートされていません。
jsPDF は CSS スタイルを無視しますが、見出し (h1、h2 など) とテキストノード内のテキストを書式設定できます。テキストエリアなどの要素は印刷ではサポートされていません。

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

ソース：php.cn

前の記事：5 の React Native にカスタムアイコンを追加する方法次の記事：&#新しい&#キーワード

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

最新の問題

function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";

から 2024-04-29 11:01:01

0

3

2043

Google Chromeのモバイル版を表示する方法こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?

から 2024-04-23 00:22:19

0

11

2203

子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。最初の 2 つの文は実行可能ですが、最後の文は実装できません。

から 2024-04-19 15:37:47

0

1

1860

親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');

から 2024-04-18 23:52:34

0

1

1746

CSS マインドマッピングに関するコースウェアはどこにありますか? コースウェア

から 2024-04-16 10:10:18

0

0

1768

関連トピック

詳細>

人気のおすすめ

人気のチュートリアル

詳細>

関連するチュートリアル

人気のおすすめ

最新のコース

最新のダウンロード

詳細>

ウェブエフェクト

公式サイト

サイト素材

フロントエンドテンプレート