Pertanyaan jsPDF dari gambar HTML menyebabkan pdf menjadi kosong


Saya mencoba menghasilkan pdf dari Konten Tinymce, yang saya akses dengan AngularJS. Untuk ini, saya menggunakan plugin from_html di dalam jspdf.

Pertama bagian kode yang relevan.

Fungsi Relevan & Index.ejs jspdf termasuk

//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>

Kode yang saya ingin parsing dari html ke pdf terlihat agak seperti ini, ini hanyalah sebuah contoh.

<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>

Jika saya menguraikan kode ini tanpa gambar, setidaknya bekerja untuk beberapa bagian, beberapa manipulasi teks seperti italic tidak benar-benar dikenali dan juga daftar tidak dikenali oleh parser.

Namun jika saya mem-parsing gambar (semua gambar yang saya coba adalah gambar standar .jpg dari misalnya folder gambar windows dan saya menurunkannya jika mereka tidak muat di situs pdf dan itulah yang menyebabkan situs kosong.

Saya debug kode jspdf sejauh ini sedikit bisa melihat bahwa itu berjalan melalui metode untuk memuat gambar. Juga get-request dikirim dari kode ini, seperti yang ditunjukkan di Browser Debugger (rutin ini juga ditulis oleh saya). Tapi tetap saja situs itu tetap kosong. img src yang sama ditampilkan di editor dengan baik.

Bagaimana saya bisa memperbaiki masalah ini, sehingga gambar ditampilkan sama sekali dan tidak menyebabkan pdf kosong.


6
2018-04-25 10:26


asal


Jawaban:


Saya telah menemukan solusi untuk masalah saya. Saat menggunakan fromHTML Plugin sangat penting untuk menyimpan pdf di callback karena yang lain itu tidak akan selesai render pada saat menyimpan dokumen.

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

32
2018-04-25 12:13