Html2canvas: DOMException: не удалось установить свойство «acceptStyleSheets» в «ShadowRoot»: совместное использование созданных таблиц стилей в нескольких документах запрещено.

Созданный на 4 нояб. 2019 · 13Комментарии · Источник: niklasvh/html2canvas

DOMException: не удалось установить свойство «acceptStyleSheets» в «ShadowRoot»: совместное использование созданных таблиц стилей в нескольких документах запрещено.

Источник

ravatsinh

👍24

Самый полезный комментарий

та же проблема с использованием в angular 8 и ionic 4

LucasManerich 27 нояб. 2019

👍20

Все 13 Комментарий

У меня точно такая же проблема; как с этим бороться?

vernvn 6 нояб. 2019

та же проблема с использованием в angular 8 и ionic 4

LucasManerich 27 нояб. 2019

👍20

Та же проблема ionic4, как ее решить?

UniqueAlex 5 дек. 2019

У меня такая же проблема с ionic 5 ... Кто-нибудь нашел решение?

ricardooo1998 17 дек. 2019

Промежуточный план от Yupeng в ionic4

index.html

<body>
  <div id="html2canvas"></div>
  <app-root></app-root>
</body>

xxx.ts

const element = document.getElementById('html2canvas');
const targetElement = document.getElementById('target').cloneNode(true);
element.appendChild(targetElement);
this.html2canvas.html2canvas(element.firstChild).then((img) => {
    this.img = img;
    element.firstChild.remove();
}).catch((res) => {
    console.log(res);
});

Html2canvasService.service.ts

import {Injectable} from '@angular/core';
import {AlertService} from './alert.service';

declare let html2canvas;

@Injectable()
export class Html2canvasService {
    constructor(private alert: AlertService) {

    }

    public html2canvas(ele) {

        if (!ele) {
            return;
        }

        const option = {allowTaint: true, useCORS: true};
        return html2canvas(ele, option).then((canvas) => {
            if (canvas) {
                return canvas.toDataURL('image/png');
            }
            return null;
        }).catch((res) => {
            console.log(res);
            return res;
        });
    }
}

G-yanpeng 20 дек. 2019

🚀3 👍3

@ G-yanpeng Не могли бы вы подробнее рассказать о своем решении? Я пытаюсь сделать то же самое для версии ionic 4 angular8.

Спасибо!

nuno 22 дек. 2019

Та же проблема. Кто-нибудь нашел решение?

Спасибо!

abritopach 22 дек. 2019

@ G-yanpeng Не могли бы вы подробнее рассказать о своем решении? Я пытаюсь сделать то же самое для версии ionic 4 angular8.
Спасибо!

В Angular8 внесены новые изменения, из-за которых html2canvas не работает должным образом. Тогда есть это временное решение, пусть html2canvas работает вне angular, скопируйте dom, который должен генерировать изображение, на тот же уровень, что и запись angular (app-root), чтобы избежать влияния, вызванного angular.

В Angular8 есть новые изменения, из-за которых html2canvas не работает должным образом.Тогда есть это временное решение, чтобы заставить html2canvas работать за пределами angular, скопируйте dom, который должен сгенерировать изображение, на тот же уровень записи angular (app-root), чтобы избежать удар угловой.
- от гугл переводчик

G-yanpeng 24 дек. 2019

Можете ли вы предоставить полный код файла компонента xxx.ts? Мы также столкнулись с той же ошибкой при попытке экспорта в .pdf. За исключением этой ошибки все остальное в норме. Я также могу просмотреть файл .pdf.
Это мой код:
(Переведено на китайский с помощью переводчика Google)
`
импортировать {Component, OnInit} из '@ angular / core';
импортировать {WcExpenditureCalcPipe} из src / app / _pipes / wc-inventory-calc.pipe ';
// экспорт в pdf
импортировать {Router} из '@ angular / router';
import {ExportAsService, ExportAsConfig} from'ngx-export-as ';
импортировать {платформу} из '@ ionic / angular';
импортировать {FileOpener} из '@ ionic-native / file-opener / ngx';
импортировать {файл} из '@ ionic-native / file / ngx';
импортировать {FileTransfer, FileTransferObject} из '@ ionic-native / file-transfer / ngx';

  @Component({
    selector: 'app-wc-estimate',
    templateUrl: './wc-estimate.page.html',
    styleUrls: ['./wc-estimate.page.scss'],
    providers: [WcExpenditureCalcPipe]
  })
  export class WcEstimatePage implements OnInit {
    dataEntered: any;
    wcEstimate: any;

    // export config
    storageDirectory: any;

    exportAsConfig: ExportAsConfig = {
      type: 'pdf', // the type you want to download
      elementId: 'myDiv', // the id of html/table element
      options: {
        margin: 15,
        jsPDF: {
          orientation: 'portrait',
          format: 'a4',
          unit: 'mm'
        },
        pdfCallbackFn: this.pdfCallbackFn // to add header and footer
      },
    }
    constructor(
      public router: Router,
      private exportAsService: ExportAsService,
      private transfer: FileTransfer,
      private file: File,
      private platform: Platform,
      private fileOpener: FileOpener,
      private wcExpenditureCalcPipe: WcExpenditureCalcPipe
    ) {
      this.platform.ready().then(() => {
        if (!this.platform.is('cordova')) {
          return false;
        }

        if (this.platform.is('ios')) {
          this.storageDirectory = this.file.externalDataDirectory;
        }
        else if (this.platform.is('android')) {
          this.storageDirectory = this.file.externalDataDirectory;
        }
        else {
          return false;
        }
      });
    }

    ngOnInit() {
      this.dataEntered = JSON.parse(localStorage.getItem('DataEntered'));
      this.getValues(this.dataEntered);
    }
    getValues(dataEntered: any) {
      this.wcEstimate = this.wcExpenditureCalcPipe.getWCE(dataEntered)
      console.log(this.wcEstimate);
    }

    // export PDF
    export(event) {
      const fileTransfer: FileTransferObject = this.transfer.create();

      this.exportAsService.get(this.exportAsConfig).subscribe((data: any) => {
        const fileName = 'PReport ' + this.dataEntered.Project_Name + ' - WC Estimate.pdf';
        fileTransfer.download(data, this.storageDirectory + fileName).then((entry) => {
          this.fileOpener.open(entry.toURL(), 'application/pdf').then(() => {
          }).catch(e => {
            console.log('Error opening file', e);
          });
        }, (error) => {
          console.log('error ' + JSON.stringify(error));
        });
      });
      event.preventDefault();
    }
    pdfCallbackFn(pdf: any) {
      // example to add page number as footer to every page of pdf
      const noOfPages = pdf.internal.getNumberOfPages();
      for (let i = 1; i <= noOfPages; i++) {
        pdf.setPage(i);
        pdf.text('WC Estimate', 15, 10)
        pdf.text('Page ' + i + ' of ' + noOfPages, 15, pdf.internal.pageSize.getHeight() - 10);
      }
    }

    //Edit report 
    editClick(event: any) {
      localStorage.setItem('isEdit', 'true');
      this.router.navigateByUrl('/dashboard/landing');

    }
    //done click 
    doneClick(event: any) {
      this.router.navigateByUrl('/dashboard/review');

    }
    // exit click 
    exitClick(event: any) {
      this.router.navigateByUrl('/dashboard/entry-point');
    }

  }

`
Событие platform.ready действительно не требуется.Я пытался добавить в папку «Загрузить», если это android, и папку «Документы», если это iOS.

ravimallya 1 янв. 2020

@ravimallya
Я обновил содержимое в html2canvasservice.service.ts, но не думаю, что это вам поможет. Следует отметить, что при использовании этой временной схемы изображения могут генерироваться обычным образом, но исключение исключения все равно будет сообщаться.
Возможно, вы можете попробовать создание PDF-файлов с помощью JSPDF и html2canvas.

G-yanpeng 3 янв. 2020

👍2

Промежуточный план от Yupeng в ionic4

index.html

<body>
  <div id="html2canvas"></div>
  <app-root></app-root>
</body>

xxx.ts

const element = document.getElementById('html2canvas');
const targetElement = document.getElementById('target').cloneNode(true);
element.appendChild(targetElement);
this.html2canvas.html2canvas(element.firstChild).then((img) => {
    this.img = img;
    element.firstChild.remove();
}).catch((res) => {
    console.log(res);
});

Html2canvasService.service.ts

import {Injectable} from '@angular/core';
import {AlertService} from './alert.service';

declare let html2canvas;

@Injectable()
export class Html2canvasService {
    constructor(private alert: AlertService) {

    }

    public html2canvas(ele) {

        if (!ele) {
            return;
        }

        const option = {allowTaint: true, useCORS: true};
        return html2canvas(ele, option).then((canvas) => {
            if (canvas) {
                return canvas.toDataURL('image/png');
            }
            return null;
        }).catch((res) => {
            console.log(res);
            return res;
        });
    }
}

Большое спасибо! Отличное решение!

kennethross 4 мая 2020

Промежуточный план от Yupeng в ionic4

index.html

<body>
  <div id="html2canvas"></div>
  <app-root></app-root>
</body>

xxx.ts

const element = document.getElementById('html2canvas');
const targetElement = document.getElementById('target').cloneNode(true);
element.appendChild(targetElement);
this.html2canvas.html2canvas(element.firstChild).then((img) => {
    this.img = img;
    element.firstChild.remove();
}).catch((res) => {
    console.log(res);
});

Html2canvasService.service.ts

import {Injectable} from '@angular/core';
import {AlertService} from './alert.service';

declare let html2canvas;

@Injectable()
export class Html2canvasService {
    constructor(private alert: AlertService) {

    }

    public html2canvas(ele) {

        if (!ele) {
            return;
        }

        const option = {allowTaint: true, useCORS: true};
        return html2canvas(ele, option).then((canvas) => {
            if (canvas) {
                return canvas.toDataURL('image/png');
            }
            return null;
        }).catch((res) => {
            console.log(res);
            return res;
        });
    }
}

Я получаю следующую ошибку: «ERROR TypeError: html2canvas не является функцией» в следующем вызове функции из службы:

return html2canvas(ele, option).then((canvas) => {
    if (canvas) {
        return canvas.toDataURL('image/png');
    }
    return null;
})

derek90 8 июн. 2020

Промежуточный план от Yupeng в ionic4

index.html

<body>
  <div id="html2canvas"></div>
  <app-root></app-root>
</body>

xxx.ts

const element = document.getElementById('html2canvas');
const targetElement = document.getElementById('target').cloneNode(true);
element.appendChild(targetElement);
this.html2canvas.html2canvas(element.firstChild).then((img) => {
    this.img = img;
    element.firstChild.remove();
}).catch((res) => {
    console.log(res);
});

Html2canvasService.service.ts

import {Injectable} from '@angular/core';
import {AlertService} from './alert.service';

declare let html2canvas;

@Injectable()
export class Html2canvasService {
    constructor(private alert: AlertService) {

    }

    public html2canvas(ele) {

        if (!ele) {
            return;
        }

        const option = {allowTaint: true, useCORS: true};
        return html2canvas(ele, option).then((canvas) => {
            if (canvas) {
                return canvas.toDataURL('image/png');
            }
            return null;
        }).catch((res) => {
            console.log(res);
            return res;
        });
    }
}

Это очень хорошо работает. Большое спасибо за решение. С собственными элементами ionic (такими как ion-text, ion-icon внутри элемента для копирования) это не работает. Но я изменил свои ионные элементы на html. Теперь он работает идеально.

venkatesanvaishali 21 июл. 2020

Была ли эта страница полезной?

0 / 5 - 0 рейтинги

Смежные вопросы

html2canvas не захватывает весь экран. (Гридстер 2)

deepender87 · 4Комментарии

при использовании html2canvas, почему изображение с онлайн-адресом не может появиться в результате, кто-нибудь знает об этом? скажите, пожалуйста, спасибо!

Juliazhong · 4Комментарии

TypeError: Не удается прочитать стек свойства null — v0.5.0-alpha1

wbarrantes · 3Комментарии

Повтор фона не работает

anthonymejia · 4Комментарии

[Safari 10.1.2] Не удается отобразить значок FontAwesome на холсте.

stevencherry1 · 3Комментарии