jsPDF fromHTML images 导致pdf为空

Question

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

首先是相关的代码部分。

Relevant Function & 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 代码，可以看到它通过加载图像的方法运行。如浏览器调试器所示（此例程也是我编写的），此代码还会发送获取请求。但该网站仍然是空的。完全相同的 img src 完美地显示在编辑器中。

我该如何解决这个问题，所以图像完全显示并且不会导致 pdf 为空。

Answer 1

感谢@FroZenViper 为我指出回调解决方案，然后我可以使用 setTimeout 解决它:) - jsPDF 版本 1.5.3

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

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

Answer 2

我找到了解决问题的方法。使用 fromHTML 插件时，将 pdf 保存在回调中很重要，否则在保存文档时它不会完成渲染。

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