web-dev-qa-db-ja.com

jsPDFを使用したHTML文字列の末尾のページ

私は jsPDF を使用して、連結されたHMTL文字列からPDFドキュメントを生成しています。

TypeScriptを使用してHTMLを動的にプルしているので、getElementById()ではなく、このメソッドを使用する必要があります。

PDFドキュメントを生成できました。問題は、テキストがPDFに表示される方法です。画面（下の画像）。

私はこの特定の問題に対する答えを見つけることができず、これを解決するためにさまざまな方法を試しましたが（以下で説明）、ほとんど成功していません。

JsPDFライブラリ内で右マージン、テキストの折り返し、またはその他のフォーマット機能を使用する、もっと簡単な方法があるといいのですが、誰かが私に指摘することはできますか？

PDFの右側に続くテキスト：enter image description here

最初は、以下のmarginおよびwidthオプションを追加することでこれを修正できると考えました。しかし、そうではありませんでした。

TypeScriptコード（メイン関数）：

_generatePdf() {
    console.log('Generating PDF');
    // (orientation: portrait, units: pt, PDF page size: A4)
    const doc = new jspdf('p', 'pt', 'a4');
    const editor1Content = this.getEditorHtml(this.editorComponent1); // HTML string
    const editor2Content = this.getEditorHtml(this.editorComponent2); // HTML string
    const source = editor1Content + editor2Content; // combined HTML string
    console.log('source: ', source);
    // source is the HTML string or DOM elem ref. HTML String in this case.
    // width - max width of content on PDF
    // 0.5, 0.5 - margin left, margin top
    const margins = {top: 60, bottom: 30, left: 30, width: 595};
    const pdfDocument = doc.fromHTML(source, margins.left, margins.top, { width: margins.width, },
      // tslint:disable-next-line:only-arrow-functions
      function(dispose) {
        doc.save('news-summary.pdf'); // Generated PDF
      }, margins
    );
  }
_

調査の結果、jsPDF関数splitTextToSize()が見つかりました。これを使用して、文字列を文字列配列に分割し、改行_<br>_タグで再度結合しました。

これは部分的に機能しましたが、PDF）のフォーマットが不適切で、このメソッドの制限により、不要な場合は改行しました 。

TypeScriptコード（splitTextToSize（）を使用）：

_const editor1ContentSplitArray = doc.splitTextToSize(editor1Content, 850);
const source = editor1ContentSplitArray.join('<br>');
_

手動で挿入した改行の使用enter image description here

[〜＃〜] edit [〜＃〜]これに関する追加情報：

上記のテキストを別のWebサイトからコピーして、リッチテキストエディター（_CKEditor 5_）に貼り付けます。次に、変換を実行するためのonClick関数に上記のTypeScriptコードを含むボタンがあります。

javascripthtmlpdfjspdfhtml-to-pdf
9
engage_roll

文字列配列を結合する必要はありません。

文字列配列をdoc.fromHtmlに挿入するか、doc.textを使用してください。doc.textは文字列と文字列配列の両方を引数として取ります。

ここであなたがする必要があること：

generatePdf() {

    console.log('Generating PDF');

    const doc = new jspdf('p', 'pt', 'a4');

    const editor1Content = this.getEditorHtml(this.editorComponent1); // HTML string
    const editor2Content = this.getEditorHtml(this.editorComponent2); // HTML string

    const concatEditorContent = editor1Content + editor2Content; // combined HTML string


    const margins = {top: 60, bottom: 30, left: 30, width: 595};
    const source = doc.splitTextToSize(concatEditorContent, 850);

    const pdfDocument = doc.fromHTML(source, margins.left, margins.top, { width: margins.width })


    function(dispose) {
        doc.save('news-summary.pdf'); // Generated PDF
    }, margins);

}
1
khizar syed