来自HTML图像的jsPDF导致pdf为空 [英] jsPDF fromHTML images cause the pdf to be empty

问题描述

我正在尝试从Tinymce Content生成一个pdf文件，我可以使用AngularJS访问该文件.为此，我在jspdf中使用from_html插件.

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.

相关功能和功能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的代码看起来像这样，这只是一个示例.

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.

但是，如果我解析图像(我尝试过的所有图像都是来自Windows图片文件夹的标准.jpg图片，并且我缩小了它们的尺寸，以防它们不适合pdf网站，这就是导致网站空白的原因).

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.

到目前为止，我已经调试了jspdf代码，几乎可以看到它遍历了加载图像的方法.还从该代码发送get-request，如浏览器调试器中所示(该例程也是由我编写的).但是该站点仍然是空的.完全相同的img src会在编辑器中完美显示.

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.

如何解决此问题，因此图像完全显示了，并且不会导致pdf为空.

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

推荐答案

我已经找到解决问题的方法.使用fromHTML插件时，将pdf保存在回调中很重要，因为否则保存文档时将无法完成渲染.

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

这篇关于来自HTML图像的jsPDF导致pdf为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！