Question

我正在用html2canvas和带有Angular4的jsPDF创建一个图像。我想将此图像放在2页生成的pdf的第1页上。

但似乎就行，

 doc.save('test.pdf');

需要在htm2canvas()之后的函数内部。因为如果我把它放在外面，它将不包括pdf中的图像。

generatePDF(){
      var doc = new jsPDF();
      doc.text(50,90,this.problems.length.toString());
      doc.text(50,100,'page 1')
      doc.addPage();
      doc.text(50,100,'page 2')
      html2canvas(document.getElementById('graph')).then(function(canvas) {
        var img = canvas.toDataURL("image/png");
        doc.addImage(img, 'JPEG', 100, 100);
        doc.save('test.pdf');
    });
    // doc.save('test.pdf');//fails to add image to pdf
  }

我无法将addPage()放在html2canvas()之后，因为当html2canvas被调用时会生成pdf，并且在它被包含之后没有任何内容。

似乎唯一的办法就是将jsPDF放在html2canvas()这样的内容中，

  generatePDF(){
    html2canvas(document.getElementById('graph')).then(function(canvas) {
      var doc = new jsPDF();
      doc.text(50,100,'page 1')
      var img = canvas.toDataURL("image/png");
      doc.addImage(img, 'JPEG', 100, 100);
      doc.addPage();
      doc.text(50,100,'page 2')
      doc.save('test.pdf');
    });

这确实有效。

但问题是我在html2canvas()内部时无法使用外部变量，就像这样。

  generatePDF(){
    console.log("outside: this.problem.length = " + this.problems.length);// works

    html2canvas(document.getElementById('graph')).then(function(canvas) {
      console.log("inside: this.problem.length = " + this.problems.length);// not working!!!

      var doc = new jsPDF();
      doc.text(50,100,'page 1');
      var img = canvas.toDataURL("image/png");
      doc.addImage(img, 'JPEG', 100, 100);
      doc.addPage();
      doc.text(50,100,'page 2')
      doc.save('test.pdf');
    });
    // doc.save('test.pdf');//fails to add image to pdf
  }

package.json具有html2canvas和jspdf的类型：

...
"@types/html2canvas": "^0.5.35",
"@types/jspdf": "^1.1.31",
"@types/lodash": "^4.14.74",
"html2canvas": "^0.5.0-beta4",
"jspdf": "^1.3.5",
...

github上的完整代码为here，相关代码在第428行的app.component.ts底部注释掉。

可能的解决方案here。

Answer 1

当然你可以访问那个变量。问题是每个function创建自己的范围并将this定义为其自身上下文的链接，因此html2canvas then-callback的this与generatePDF函数的{{1}不同}}。这是javascript作为函数式语言的基本范例的一部分。

最简单的解决方案是将上下文保存在局部变量中：

this

另一种选择是使用ES箭头功能（如果ES6适用于您的项目;我想这是由于Angular 4），因为箭头功能保存了父上下文：

generatePDF() {
  var self = this;
  console.log("outside: self.problem.length = " + self.problems.length);

  html2canvas(document.getElementById('graph')).then(function(canvas) {
    console.log("inside: self.problem.length = " + self.problems.length);
    // ...
  });
  // ...
}

不确定这是不是故事，但希望这会有所帮助！

Answer 2

此功能是异步的：

html2canvas(document.getElementById('graph'))

您只能在回调函数内访问生成的图像。如果要使用html2canvas生成图像，那么所有与pdf相关的代码都必须在回调中。这真的是你已经做过的。如果您需要pdf中的其他图像，则会有更多嵌套回调，并且此行doc.save('test.pdf');必须位于最后一行内。

获取图像第1页，共2页pdf

2 个答案: