在第2页的第1页获取图像pdf [英] Getting image on page 1 of 2 page pdf

问题描述

我正在使用html2canvas和Angular4的jsPDF创建图像.我想将此图像放置在2页生成的pdf的第1页上.

I am creating an image with html2canvas and with jsPDF with Angular4. I want to place this image on page 1 of a 2 page generated pdf.

但是似乎这行，

 doc.save('test.pdf');

需要紧接在htm2canvas()之后的函数内.因为如果我将其放置在该位置之外，它将不会在pdf中包含该图像.

needs to be inside the function just after htm2canvas(). Because if I place it outside this it will not include the image in the 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，之后将不包含任何内容.

I can't place the addPage() after the html2canvas(), because when html2canvas is called that generates the pdf and nothing after it will be included.

似乎唯一的方法是像这样将jsPDF放在html2canvas()内，

Seems the only way is to put the jsPDF inside the html2canvas() like this,

  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()内部时，我不能像这样从外部使用变量.

But then the problem is that I can't use a variable from outside, when inside html2canvas(), like this.

  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的类型:

package.json has the types for html2canvas and 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上，第428行的app.component.ts底部注释了相关代码.

The full code is here on github, with the relevant code commented out at the bottom of app.component.ts on line 428.

可能的解决方案推荐答案

当然，您可以访问该变量.问题在于，每个function都创建自己的作用域，并将this定义为指向其自身上下文的链接，因此html2canvas then-callback的this与generatePDF函数的this不同.这是javascript作为功能语言的基本范例的一部分.

Of course you can access that variable. The problem is that each function creates its own scope and defines this as a link to its own context, so the html2canvas then-callback's this is not the same as generatePDF function's this. This is a part of basic paradigm of javascript as a functional language.

最简单的解决方案是将上下文保存在本地变量中

The simplest solution is to save the context in a local variable:

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);
    // ...
  });
  // ...
}

另一种选择是使用ES箭头功能(如果ES6适合您的项目；我想是由于Angular 4的缘故)，因为箭头功能保存了父上下文:

Another option is to use ES arrow function (in case of ES6 is appropriate for your project; and I guess it's so due to Angular 4) because the arrow function saves the parent context:

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

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

不确定是否是全部故事，但希望能帮上忙！

Not sure if it's all the story, but hope this helps!

这篇关于在第2页的第1页获取图像pdf的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！