html2canvas和Angular4如何修改选项

Question

我正在尝试为我的 Angular 应用程序创建下载功能。我已经设法使它正常工作，但我遇到了此处描述的问题：

https://github.com/niklasvh/html2canvas/issues/722

图像来自外部来源，因此未保存为渲染的一部分。显然，您可以设置布尔值 allowTaint，它也会保存外部图像，但由于我是 Angular 和 html2canvas 的新手，我不知道该怎么做. 我的代码如下：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { ResultsService } from '../shared/results.service';
import { IResult } from '../shared/models/result.model';
import { IGroup } from '../shared/models/group.model';

import * as jsPDF from 'jspdf';
import * as html2canvas from "html2canvas";

@Component({
  templateUrl: './results.component.html',
  styleUrls: ['./results.component.scss']
})
export class ResultsComponent implements OnInit {
  id: number;
  result: IResult;
  groups: IGroup[];
  private sub: any;

  constructor(
    private _resultsService: ResultsService,
    private _route: ActivatedRoute
  ) { }

  ngOnInit() {
    this.sub = this._route.params.subscribe(params => {
      this.id = +params['id'];
    });
    this._resultsService.get(this.id).subscribe(result => {
      this.result = result
      this.groups = JSON.parse(result.data);
    });
  }

  download() {
    html2canvas(document.body).then(function(canvas) {
      var img = canvas.toDataURL("image/png");
      var doc = new jsPDF();
      doc.addImage(img,'JPEG',0,0);
      doc.save('test.pdf');
    });
  }
}

我可以在该代码的哪个位置设置 allowTaint 选项？

Answer 1

原来有两种方法可以做到这一点。您可以使用上述方法，只需将选项添加为构造函数参数，如下所示：

html2canvas(document.body, { allowTaint: true }).then(function(canvas) {
  var img = canvas.toDataURL("image/png");
  var doc = new jsPDF();
  doc.addImage(img,'JPEG',0,0);
  doc.save('test.pdf');
});

或者，由于 jsPdf 已经使用 html2canvas，您可以这样做：

let pdf = new jsPDF();
pdf.addHTML(document.body, 0, 0, { allowTaint: true }, () => {
  pdf.save("test.pdf");
});

html2canvas和Angular4如何修改选项

html2canvas and Angular4 how to modify options

html2canvas

jspdf

angular