Question

我正在尝试使用AngularJS从Tinymce内容生成pdf。为此，我使用jspdf中的from_html插件。

首先是相关的代码部分。

相关功能＆amp; 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);

Answer 2

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

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

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

Answer 3

对于Angular 8

如果在fromHTML中使用图像，则必须异步加载它们。因此，您必须使用callback参数。 jsPDF中的fromHTML加载所有图像并生成文档时，将调用回调函数。

https://github.com/MrRio/jsPDF/issues/788

public Download() {
    const doc = new jsPDF();

    const specialElementHandlers = {
      '#editor': function (element, renderer) {
        return true;
      }
    };

    const content = this.downloadPanelContent.nativeElement;

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

HTML

<div id="downloadPanel" #downloadPanelContent>
    <div class="row" style="display: none;">
        <img src="../../../../assets/img/image.png" />
        <div class="container">
            <label class="text-black-54">Backup codes</label><br>
            <ng-container *ngTemplateOutlet="backupCodes"></ng-container>

        </div>
    </div>
</div>

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

3 个答案: