来自HTML图像的jsPDF导致pdf为空

Question

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

首先是相关代码部分。

相关函数&Index.ejsjspdf包含

//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代码，可以看出它是通过load image的方法运行的。 get-requests 也是从此代码发送的，如 Browser Debugger 中所示（此例程也是我编写的）。但该网站仍然是空的。完全相同的 img src 在编辑器中显示得很好。

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

Answer 1

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

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

Answer 2

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

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

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

来自HTML图像的jsPDF导致pdf为空

jsPDF fromHTML images cause the pdf to be empty

javascript

html

angularjs

pdf

jspdf