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如何修改选项

1 个答案: