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

Question

我正试图用Tinymce内容生成一个pdf,我用AngularJS访问它.为此,我使用jspdf中的from_html插件.

首先是相关的代码部分.

相关函数和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>

如果我在没有图像的情况下解析此代码,它至少在某些部分工作,一些文本操作(如斜体)无法真正识别,并且解析器也无法识别列表.

但是,如果我解析一个图像(我尝试的所有图像都是标准的.jpg图片,例如windows图片文件夹,我缩小它们以防它们不适合pdf网站,这就是导致空网站的原因.

到目前为止我调试了jspdf代码,可以看到它运行的是加载图像的方法.此外,还会从此代码发送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);