Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
149
rated 0 times [  156] [ 7]  / answers: 1 / hits: 31467  / 8 Years ago, mon, april 25, 2016, 12:00:00

I'm trying to generate a pdf out of Tinymce Content, which I access with AngularJS. For This I use the from_html plugin inside jspdf.



First the relevant code parts.



Relevant Function & Index.ejs jspdf includes





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





The Code that I want to parse from html to pdf looks somewhat like this, this is just an example.





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





If I parse this code without the image, it's at least working for some part, some text manipulations like italic are not really recognized and also lists are not recognized by the parser.



However if I parse an image (all the images I tried are standard .jpg pictures from for example the windows picture folder and I downscaled them in case they wouldn't fit on the pdf site and that's what causes the empty site.



I debugged the jspdf code so far a little could see that it runs through the methods for load image. Also get-requests are sent from this code, as shown in the Browser Debugger (this routine is also written by me). But still the site remains empty. the exact same img src is displayed in the editor perfectly fine.



How can I fix this problem, so the image is shown at all and it doesn't cause the pdf to be empty.


More From » html

 Answers
81

I have found the solution to my problem. When using the fromHTML Plugin it's important to save the pdf in the callback because else it won't be done rendering by the time it saves the doc.



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

[#62413] Friday, April 22, 2016, 8 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
brittanye

Total Points: 263
Total Questions: 94
Total Answers: 115

Location: Burkina Faso
Member since Thu, Dec 23, 2021
3 Years ago
brittanye questions
Mon, Aug 10, 20, 00:00, 4 Years ago
Tue, Jun 16, 20, 00:00, 4 Years ago
Wed, Apr 22, 20, 00:00, 4 Years ago
Mon, Apr 13, 20, 00:00, 4 Years ago
;