Html2canvas: DOMException: Fehler beim Festlegen der 'adoptedStyleSheets'-Eigenschaft auf 'ShadowRoot': Das Teilen konstruierter Stylesheets in mehreren Dokumenten ist nicht zulässig

Erstellt am 4. Nov. 2019  ·  13Kommentare  ·  Quelle: niklasvh/html2canvas

DOMException: Fehler beim Festlegen der 'adoptedStyleSheets'-Eigenschaft auf 'ShadowRoot': Das Teilen konstruierter Stylesheets in mehreren Dokumenten ist nicht zulässig

picture ravatsinh
👍24

Hilfreichster Kommentar

gleiches Problem mit Winkel 8 und ionisch 4

picture LucasManerich am 27. Nov. 2019
👍20

Alle 13 Kommentare

Ich habe das gleiche Problem; Wie man damit umgeht ?

vernvn picture vernvn am 6. Nov. 2019

gleiches Problem mit Winkel 8 und ionisch 4

LucasManerich picture LucasManerich am 27. Nov. 2019
👍20

Gleiches Problem ionic4, wie kann man es lösen?

UniqueAlex picture UniqueAlex am 5. Dez. 2019

Ich stehe vor dem gleichen Problem mit ionic 5... Hat jemand eine Lösung gefunden?

ricardooo1998 picture ricardooo1998 am 17. Dez. 2019

Zwischenplan von Yupeng in 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 picture G-yanpeng am 20. Dez. 2019
🚀3 👍3

@G-yanpeng Können Sie Ihre Lösung bitte näher erläutern? Ich versuche das gleiche für die ionic 4 angle8 Version zu tun.

Dankeschön!

nuno picture nuno am 22. Dez. 2019

Gleiches Problem. Hat jemand eine Lösung gefunden?

Vielen Dank!

abritopach picture abritopach am 22. Dez. 2019

@G-yanpeng Können Sie bitte Ihre Lösung näher erläutern?Ich versuche das Gleiche für die ionic 4 angle8-Version.

Dankeschön!

Angular8 hat neue Änderungen, die dazu führen, dass html2canvas nicht richtig funktioniert. Dann gibt es diese temporäre Lösung, lassen Sie html2canvas außerhalb von Angular arbeiten, kopieren Sie das Dom, das das Bild generieren muss, auf die gleiche Ebene wie der Angular-Eintrag (App-Root), um den Einfluss von Angular zu vermeiden.

Angular8 hat neue Änderungen, die dazu führen, dass html2canvas nicht richtig funktioniert.Dann gibt es diese temporäre Lösung, damit html2canvas außerhalb von Angular funktioniert die Wirkung von Winkel.
- von Google übersetzen

image

G-yanpeng picture G-yanpeng am 24. Dez. 2019

Können Sie den vollständigen Code der Komponentendatei xxx.ts bereitstellen? Derselbe Fehler ist auch beim Versuch, in .pdf zu exportieren, aufgetreten. Bis auf diesen Fehler ist alles andere normal. Ich kann auch die .pdf-Datei anzeigen.
Das ist mein Code:
(Übersetzt ins Chinesische mit Google Übersetzer)
`
import {Component, OnInit} from'@angular/core';
import {WcExpenditureCalcPipe} from'src/app/_pipes/wc-expenditure-calc.pipe';
// in pdf exportieren
import {Router} from'@angular/router';
import {ExportAsService, ExportAsConfig} from'ngx-export-as';
import {Platform} from'@ionic/angular';
import {FileOpener} from'@ionic-native/file-opener/ngx';
import {File} from'@ionic-native/file/ngx';
import {FileTransfer, FileTransferObject} from'@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');
    }

  }

`
Das Ereignis platform.ready ist wirklich nicht erforderlich. Ich habe versucht, es zum Ordner "Download" hinzuzufügen, wenn es sich um Android handelt, und zum Ordner "Dokumente", wenn es sich um iOS handelt.

ravimallya picture ravimallya am 1. Jan. 2020

@ravimallya
Ich habe den Inhalt in html2canvasservice.service.ts aktualisiert, aber ich glaube nicht, dass es Ihnen helfen wird. Es sollte beachtet werden, dass mit diesem temporären Schema Bilder normal generiert werden können, aber eine Ausnahmebedingung wird trotzdem gemeldet.
Vielleicht können Sie die PDF-Generierung mit JSPDF und html2canvas ausprobieren.

G-yanpeng picture G-yanpeng am 3. Jan. 2020
👍2

Zwischenplan von Yupeng in 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;
        });
    }
}

Ich danke dir sehr! Tolle Problemumgehung!

kennethross picture kennethross am 4. Mai 2020

Zwischenplan von Yupeng in 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;
        });
    }
}

Ich erhalte folgende Fehlermeldung: "ERROR TypeError: html2canvas is not a function" im folgenden Funktionsaufruf des Dienstes:

return html2canvas(ele, option).then((canvas) => {
    if (canvas) {
        return canvas.toDataURL('image/png');
    }
    return null;
})
derek90 picture derek90 am 8. Juni 2020

Zwischenplan von Yupeng in 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;
        });
    }
}

Das funktioniert sehr gut. Vielen Dank für die Lösung. Bei ionischen nativen Elementen (wie ion-text, ion-icon innerhalb des zu kopierenden Elements) funktioniert dies nicht. Aber ich habe meine ionischen Elemente in HTML geändert. Jetzt funktioniert es perfekt.

venkatesanvaishali picture venkatesanvaishali am 21. Juli 2020
War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

dking3876 picture dking3876  ·  4Kommentare
tjchambers32 picture tjchambers32  ·  3Kommentare
yasergh picture yasergh  ·  5Kommentare
Loki180 picture Loki180  ·  4Kommentare
ABHIKSINGHH picture ABHIKSINGHH  ·  3Kommentare