Javascriptを使用してdiv内のHTMLからPDFを生成する質問する

Question

jsPDF はプラグインを使用できます。HTMLを印刷できるようにするには、特定のプラグインを組み込む必要があり、そのためには次の操作を行う必要があります。

へ移動https://github.com/MrRio/jsPDF最新バージョンをダウンロードしてください。
プロジェクトに次のスクリプトを含めます。

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

特定の要素を無視したい場合は、その要素に ID を付けてマークする必要があります。これにより、jsPDF の特別な要素ハンドラーで無視できるようになります。したがって、HTML は次のようになります。

<!DOCTYPE html>
<html>
  <body>
    <p id="ignorePDF">don't print this to pdf</p>
    <div>
      <p><font size="3" color="red">print this to pdf</font></p>
    </div>
  </body>
</html>

次に、次の JavaScript コードを使用して、作成した 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");

私の場合、これにより、「これを PDF に印刷」という行のみが含まれた、きれいで整った PDF が作成されました。

特別な要素ハンドラは現在のバージョンではIDのみを扱うことに注意してください。これは、GitHub の問題それは次のように述べています。

マッチングはノードツリー内のすべての要素に対して行われるため、できるだけ高速に実行したいと考えました。その場合、それは「要素 ID のみがマッチングされる」ことを意味します。要素 ID は引き続き jQuery スタイルの「#id」で実行されますが、すべての jQuery セレクターがサポートされているわけではありません。

したがって、「#ignorePDF」を「.ignorePDF」のようなクラスセレクターに置き換えてもうまくいきませんでした。代わりに、無視したいすべての要素に同じハンドラーを追加する必要があります。

var elementHandler = {
  '#ignoreElement': function (element, renderer) {
    return true;
  },
  '#anotherIdToBeIgnored': function (element, renderer) {
    return true;
  }
};

から例また、「a」や「li」などのタグを選択できるとも述べられています。ただし、ほとんどのユースケースでは少し制限が緩すぎるかもしれません。

特別な要素ハンドラーをサポートしています。ID またはノード名のいずれかに対して、jQuery スタイルの ID セレクターを使用してそれらを登録します。("#iAmID"、"div"、"span" など) 現時点では、他のタイプのセレクター (クラス、複合) はサポートされていません。

追加すべき非常に重要な点の 1 つは、すべてのスタイル情報 (CSS) が失われることです。幸い、jsPDF は h1、h2、h3 などをうまくフォーマットできるので、私の目的には十分でした。さらに、テキストノード内のテキストのみが印刷されるため、テキスト領域などの値は印刷されません。例:

<body>
  <ul>
    <!-- This is printed as the element contains a textnode -->        
    <li>Print me!</li>
  </ul>
  <div>
    <!-- This is not printed because jsPDF doesn't deal with the value attribute -->
    <input type="text" value="Please print me, too!">
  </div>
</body>

Answer 1