HTML2Canvas: невозможно найти элемент в клонированном iframe - PullRequest
Новая
       18

HTML2Canvas: невозможно найти элемент в клонированном iframe

0 голосов
/ 11 ноября 2019

В моей программе я пытаюсь выполнить экспорт некоторых страниц в PDF, но я столкнулся со следующей ошибкой, когда HTML2Canvas пытается обработать имеющиеся у меня элементы:

Невозможно найти элемент в клонированном iframe

И только это. Вот код, который я использую: 

public exportToPdf(
    selectedFilter: SelectedFilter,
    currentTime: string,
    idOfExportDiv: string[]
  ): void {
    this.addClassToMainDiv();

    const elementsToScreenshot: HTMLElement[] = [];

    for (let index = 0; index < idOfExportDiv.length; index++) {
      elementsToScreenshot.push(document.getElementById(idOfExportDiv[index]));
    }

    const fileName = 'export-' + currentTime + '.pdf';
    this.download(elementsToScreenshot, fileName, selectedFilter, currentTime);
  }

И функция загрузки: 

  download(elementById: HTMLElement[], name, selectedFilter: SelectedFilter, currentTime: string) {
    const html2canvasPromises: Promise<unknown>[] = [];

    for (let index = 0; index < elementById.length; index++) {
      html2canvasPromises.push(
        html2canvas(elementById[index], {
          useCORS: true
        }).then(canvas => {
          const image = canvas.toDataURL();
          const imagePromise = this.addImage(image);
          return imagePromise;
        })
      );
    }

    Promise.all(html2canvasPromises)
      .then(content => {
        this.removeClassFromMainDiv();
        this.downloadPdf(selectedFilter, currentTime, name, content);
        this.pdfCreated.next(true);
        this.loadingSpinnerService.close();
      })
      .catch(error => {
        console.error('Image conversion error', 'Failed to screenshot and download provided elements', {
          error: error
        });
        this.removeClassFromMainDiv();
        this.pdfCreated.next(true);
        this.loadingSpinnerService.close();
      });
  }

"elementsToScreenshot" - это массив HTMLElements, который всегда заполнен правильными найденными элементами внутриHTML-рендеринг, который выглядит следующим образом: 

0: div#main-screen-export-div.m-l-20.m-top-15.wrapper-comp
1: div#export-main-0.d-flex.w-100.ng-star-inserted
2: div#export-main-1.d-flex.w-100.ng-star-inserted
3: div#export-main-2.d-flex.w-100.ng-star-inserted

Поскольку я использую Angular и мне нужны некоторые динамически устанавливаемые идентификаторы, идентификаторы делений 1,2 и 3 делятся в HTML следующим образом: 

<div [id]="'export-main-' + index"></div>

У меня нет встроенных фреймов в моей программе, трекерах или других сторонних инжекторах, таких как объявления Google. Кто-нибудь еще сталкивался с этой проблемой раньше и знает, как ее исправить?

РЕДАКТИРОВАТЬ: Может быть, это оказывается полезным. Это файл, где ошибка, вероятно, срабатывает, так как я нашел именно эту ошибку:

https://github.com/niklasvh/html2canvas/blob/master/src/index.ts

1 Ответ

0 голосов
/ 15 ноября 2019

Я обнаружил проблему в конце

Вложенность HTML выглядела так: 

<div data-html2canvas-ignore="true">
   <div>
      <div id="export-main-0></div>
   </div>
</div>

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

...