web-dev-qa-db-ja.com

jsPDF fromHTML画像が原因でPDFが空になる

私は、AngularJSでアクセスするTinymceコンテンツからPDFを生成しようとしています。このため、jspdf内のfrom_htmlプラグインを使用します。

最初に関連するコード部分。

関連する関数とIndex.ejs jspdfに含まれる

//relevant function
var specialElementHandlers = {
  '#bypassme': function(element, renderer) {
    return true;
   }
};

var margin = {
  top: 0,
  left: 0,
  right: 0,
  bottom: 0
};

var tinymceToJSPDFHTML = document.createElement("body");
tinymceToJSPDFHTML.innerHTML = $scope.selectedItem.content;
      
var doc = new jsPDF();
doc.fromHTML(tinymceToJSPDFHTML, 0, 0, {
  'width': 100, // max width of content on PDF
  'elementHandlers': specialElementHandlers
}, function(a) { console.log(a); }, margin);

doc.save('project.pdf');
<script src="/libs/jsPDF-1.2.61/dist/jspdf.debug.js"></script>
<script src="/libs/jsPDF-1.2.61/plugins/from_html.js"></script>

Htmlからpdfに解析したいコードは、このように見えますが、これは単なる例です。

<strong>
        <img data-mce-src="file/3605842ba1b6e8ac5417622bf1c43b5b" src="file/3605842ba1b6e8ac5417622bf1c43b5b"></img>

        aaaaa

    </strong>

</p>
<p data-mce-style="text-align: center;" style="text-align: center;">

    <strong>

        sasasa

    </strong>

</p>
<p data-mce-style="text-align: right;" style="text-align: right;">

    <em>
        <strong>

            asasas

        </strong>
    </em>

</p>
<p data-mce-style="text-align: left;" style="text-align: left;">

    <span data-mce-style="text-decoration: underline;" style="text-decoration: underline;">
        <em>
            <strong>

                asasasa

            </strong>
        </em>
    </span>

</p>
<ul>

    <li data-mce-style="text-align: left;" style="text-align: left;">
        <span data-mce-style="text-decoration: underline;" style="text-decoration: underline;">
            <em>
                <strong>

                    bas

                </strong>
            </em>
        </span>
    </li>

</ul>

画像なしでこのコードを解析すると、少なくとも一部は機能し、イタリックなどの一部のテキスト操作は実際には認識されず、リストはパーサーによって認識されません。

ただし、画像を解析した場合（試したす​​べての画像は、たとえばWindows画像フォルダーの標準の.jpg画像であり、pdfサイトに適合しない場合に備えて縮小しました。これが空のサイトの原因です。

これまでにjspdfコードをデバッグしたところ、イメージのロードのメソッドを実行していることが少しわかりました。また、ブラウザーデバッガーに示されているように、このコードからget要求が送信されます（このルーチンも私が作成します）。しかし、それでもサイトは空のままです。まったく同じimg srcがエディターに完全に表示されます。

この問題をどのように修正すれば、画像がまったく表示され、PDFが空になりません。

javascripthtmlangularjspdfjspdf
12
FroZenViper

私は自分の問題の解決策を見つけました。 fromHTMLプラグインを使用する場合は、コールバックでpdfを保存することが重要です。そうしないと、ドキュメントを保存するまでにレンダリングが行われません。

doc.fromHTML(tinymceToJSPDFHTML, 0, 0, {
    'width': 100, // max width of content on PDF
    'elementHandlers': specialElementHandlers
},
function(bla){doc.save('saveInCallback.pdf');},
margin);
53
FroZenViper

コールバックソリューションを指摘してくれた@FroZenViperに感謝し、setTimeoutを使用して解決できます:)-jsPDFバージョン1.5.3

doc.fromHTML(yourTargetHTML, 0, 0, {
    // options
},

setTimeout(function () {
    doc.save(`fileName`);
}, 0);
0
Anh Hoang

Angular 8の場合

FromHTMLで画像を使用する場合は、非同期で読み込む必要があります。したがって、コールバックパラメータを使用する必要があります。 jsPDFのfromHTMLがすべての画像をロードしてドキュメントを生成すると、コールバック関数が呼び出されます。

https://github.com/MrRio/jsPDF/issues/788

public Download() {
    const doc = new jsPDF();

    const specialElementHandlers = {
      '#editor': function (element, renderer) {
        return true;
      }
    };

    const content = this.downloadPanelContent.nativeElement;

    doc.fromHTML(content.innerHTML, 0, 0, {
      'width': 100, // max width of content on PDF
      'elementHandlers': specialElementHandlers
    },
      function (bla) { doc.save('saveInCallback.pdf'); },
      0);
  }

[〜＃〜] html [〜＃〜]

<div id="downloadPanel" #downloadPanelContent>
    <div class="row" style="display: none;">
        <img src="../../../../assets/img/image.png" />
        <div class="container">
            <label class="text-black-54">Backup codes</label><br>
            <ng-container *ngTemplateOutlet="backupCodes"></ng-container>

        </div>
    </div>
</div>
0
San Jaisy