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

Я использую 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 — очень полезный пакет, но эта ошибка очень опасна. Пожалуйста помоги.


canvas html jspdf html2canvas xhtml2pdf
person user3097695    schedule 02.10.2018    source источник
comment
export — это зарезервированное слово, просто к вашему сведению.   -  person Phix    schedule 03.10.2018

Ответы (2)


arrow_upward
4
arrow_downward

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

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

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

person john    schedule 14.05.2019

arrow_upward
2
arrow_downward

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

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();
          });
    });
  };
person Omer Gurarslan    schedule 12.11.2018
comment
1. Решение 2 не работает. 2. Буду ждать открытого PR заложенного в билд. - person user3097695; 13.11.2018
comment
у вас есть ссылка на открытый PR? Это проблема и для меня - person Reed; 11.02.2019