複数のページとカットせずにDOMからPDFを生成する

最後の記事では、DOM要素からPDFを生成する方法について学びましたが、その方法のようにいくつかのボトルネックがありました.この記事では、我々はどのように我々は複数のページとカットせずにDOMからPDFを生成することを学ぶつもりです.

DOMのPDFファイル

今日の記事ではdom-to-pdfというパッケージ名を使います.このパッケージは基本的にHTML要素をキャンバスとSVGに変換します.その後、PDFにキャンバスに変換します.
このパッケージは、より簡単で、最後の記事と比較して使いやすいです.最後の記事では、1つのパッケージがDOMをイメージに変換して、他のパッケージがDOMにイメージを変換している2つの異なるパッケージを使用していました.しかし、DOMにPDFを使えば、一つのパッケージで両方のことができます.
このパッケージのプラスポイントは自動的に複数のページ形式を管理し、同時にそれはまた、PDFに追加しながらコンテンツをカットする必要があります管理します.他の言葉では、divは、それに代わりにPDFに加える間、部分で切られるつもりでありません.そして、それは大部分のケースのために非常に役に立つ次のページへの全部のdivを加えるつもりです.

インストールと使用

NPMからこのパッケージをインストールできます.

npm install --save dom-to-pdf

インストール後、このパッケージを一度インポートします.

import domToPdf from 'dom-to-pdf';

domtopdfは3つの引数を受け取ります.

最初の引数はDOM要素です.

2番目の引数はオプションオブジェクトです.

番目のコールバック関数です.

    const element = document.querySelector('.summary-report-container');

  const options = {
      filename: "test.pdf",
    };

domToPdf(element, options, () => {
// callback function
    });

PDFファイル全体の生成関数はこのようになります.

  generatePdf = () => {

    const element = document.querySelector('.summary-report-container');

    const options = {
      filename: "test.pdf",
    };

    return domToPdf(element, options, () => {
      // callback function
    });
  }

それは生成後に自動的にPDFを保存するつもりです.この方法では、複数のページをPDFを生成することができますし、コンテンツをカットすることなく.
How to create range slider with bubble in React