Html2canvas: DOMException : échec de la définition de la propriété 'adoptedStyleSheets' sur 'ShadowRoot' : le partage de feuilles de style construites dans plusieurs documents n'est pas autorisé

Créé le 4 nov. 2019 · 13Commentaires · Source: niklasvh/html2canvas

DOMException : échec de la définition de la propriété 'adoptedStyleSheets' sur 'ShadowRoot' : le partage de feuilles de style construites dans plusieurs documents n'est pas autorisé

Source

ravatsinh

👍24

Commentaire le plus utile

même problème d'utilisation en angulaire 8 et ionique 4

LucasManerich le 27 nov. 2019

👍20

Tous les 13 commentaires

J'ai le même problème; Comment y faire face ?

vernvn le 6 nov. 2019

même problème d'utilisation en angulaire 8 et ionique 4

LucasManerich le 27 nov. 2019

👍20

Même problème ionic4, comment le résoudre ?

UniqueAlex le 5 déc. 2019

Je suis confronté au même problème avec ionic 5... Quelqu'un a-t-il trouvé une solution ?

ricardooo1998 le 17 déc. 2019

Plan intérimaire de Yupeng dans 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 le 20 déc. 2019

🚀3 👍3

@G-yanpeng Pouvez-vous s'il vous plaît élaborer plus votre solution? J'essaie de faire la même chose pour la version ionic 4 angular8.

Merci!

nuno le 22 déc. 2019

Même problème. Est-ce que quelqu'un a trouvé une solution ?

Merci!

abritopach le 22 déc. 2019

@G-yanpeng Pouvez-vous s'il vous plaît élaborer davantage votre solution?J'essaie de faire la même chose pour la version ionic 4 angular8.
Merci!

Angular8 a de nouveaux changements, ce qui fait que html2canvas ne fonctionne pas correctement. Ensuite, il y a cette solution temporaire, laissez html2canvas travailler en dehors d'angular, copiez le dom qui doit générer l'image sur le même calque que l'entrée angulaire (app-root) pour éviter l'influence causée par angulaire.

Angular8 a de nouvelles modifications qui empêchent html2canvas de fonctionner correctement.Ensuite, il existe cette solution temporaire pour faire fonctionner html2canvas en dehors d'angular, copiez le dom qui doit générer l'image sur le même calque de l'entrée angulaire (app-root) pour éviter l'impact de l'angle.
- par google traduction

G-yanpeng le 24 déc. 2019

Pouvez-vous fournir le code complet du fichier composant xxx.ts ? Nous avons également rencontré la même erreur lors de la tentative d'exportation au format .pdf. A part cette erreur, tout le reste est normal. Je peux aussi voir le fichier .pdf.
C'est mon code :
(Traduit en chinois à l'aide du traducteur Google)
`
importer {Composant, OnInit} de '@angular/core' ;
importer {WcExpenditureCalcPipe} depuis'src/app/_pipes/wc-expenditure-calc.pipe' ;
// exporter en pdf
importer {Router} depuis'@angular/router' ;
importer {ExportAsService, ExportAsConfig} depuis 'ngx-export-as' ;
importer {Platform} depuis '@ionic/angular' ;
importer {FileOpener} depuis '@ionic-native/file-opener/ngx' ;
importer {Fichier} de '@ionic-native/file/ngx' ;
importer {FileTransfer, FileTransferObject} depuis '@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');
    }

  }

`
L'événement platform.ready n'est vraiment pas nécessaire. J'essayais d'ajouter au dossier "Télécharger" s'il s'agit d'Android et au dossier "Documents" s'il s'agit d'iOS.

ravimallya le 1 janv. 2020

@ravimallia
J'ai mis à jour le contenu de html2canvasservice.service.ts, mais je ne pense pas que cela vous aidera. Il convient de noter qu'en utilisant ce schéma temporaire, les images peuvent être générées normalement, mais une exception de levée sera toujours signalée.
Vous pouvez peut-être essayer la génération de PDF en utilisant JSPDF et html2canvas.

G-yanpeng le 3 janv. 2020

👍2

Plan intérimaire de Yupeng dans 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;
        });
    }
}

Merci beaucoup! Excellente solution de contournement !

kennethross le 4 mai 2020

Plan intérimaire de Yupeng dans 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;
        });
    }
}

J'obtiens l'erreur suivante : "ERROR TypeError: html2canvas is not a function" dans l'appel de fonction suivant du service :

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

derek90 le 8 juin 2020

Plan intérimaire de Yupeng dans 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;
        });
    }
}

Cela fonctionne très bien. Merci beaucoup pour la solution. Avec des éléments natifs ioniques (comme ion-text, ion-icon à l'intérieur de l'élément à copier), cela ne fonctionne pas. Mais j'ai changé mes éléments ioniques en html. Maintenant, cela fonctionne parfaitement.