html2canvas: ошибка неучтена (в обещании): [объект не определен] angular 6

Question

Я использую html2canvas, чтобы преобразовать html в изображение, а затем экспортировать в файл PDF.Вот мои шаги, используя этот пакет:

1. пряжа добавить html2canvas

2. добавить код для преобразования HTML в изображение.

   async export(comp, doc, save) {
     // create pdf file
     let height = REPORT_PAGE.top;
     const header = comp.reportHeader.nativeElement;
     const headerCanvas = await html2canvas(header, {svgRendering: true});
     height = REPORT_PAGE.top;
     let imgHeightHtml = REPORT_PAGE.header * REPORT_PAGE.width / headerCanvas.width;
     let contentDataURL = headerCanvas.toDataURL('image/png');
     doc.addImage(contentDataURL, 'PNG', REPORT_PAGE.left, height, REPORT_PAGE.width, imgHeightHtml);
     if (save) {
       doc.save('myreport.pdf');
     } else {
       doc.addPage();
     }
   }
   

где comp - угловой компонент, doc - jsPDF, save - логическое значение.Следующая ошибка будет возникать при вызове html2canvas.

Uncaught (in promise): [object Undefined]
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4053)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)
at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:500)
at ZoneTask.invoke (zone.js:485)

html2canvas - очень полезный пакет, но эта ошибка действительно плохая.Пожалуйста, помогите.

Answer 1

У меня была та же проблема, и это исправлено:

html2canvas(element, {
    ignoreElements: (node) => {
        return node.nodeName === 'IFRAME';
    }
}).then((canvas) => {
    ...
});

источник: https://github.com/niklasvh/html2canvas/issues/1593#issuecomment-489059452

Answer 2

Я также столкнулся с той же проблемой и пришел к выводу, что это ошибка.После быстрого поиска я наткнулся на эту ветку:

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

... где пользователь (adamszeibert) указал ответственный код:

Я обнаружил, что в моем случае ошибка исходила от iframeLoader, определенного в https://github.com/niklasvh/html2canvas/blob/master/src/Clone.js около строки 572.

Я мог бы решить эту проблему, изменив код для возврата Promise.resolve (cloneIframeContainer);Я почти уверен, что это исправление ломает множество других вариантов использования, но для того, что мне нужно, оно решило проблему.

Решение 1:

На сегодняшний день существуетоткрытый запрос извлечения решения:

https://github.com/niklasvh/html2canvas/pull/1681

Решение 2:

Используйте метод runOutsideAngular из NgZone.

Шаг 1: Импорт NgZone из Angular Core:

import {NgZone} from '@angular/core';

Шаг 2: Добавление ngZone в конструктор компонента:

  constructor(
              ...
              ...
              private _ngZone: NgZone) {
                  ...
              }

Шаг 3: Инкапсулируйте ваш код html2canvas следующим образом:

  public saveAsImage = () => {

    this._ngZone.runOutsideAngular(() => {

        html2canvas(document.getElementsByTagName('canvas')[0]).then(canvas => {
            let a = document.createElement('a');
            a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
            a.download = 'Some Filename.jpg';
            a.click();
          });
    });
  };