Html2canvas: DOMException: no se pudo establecer la propiedad 'adoptStyleSheets' en 'ShadowRoot': no se permite compartir hojas de estilo construidas en varios documentos

Creado en 4 nov. 2019 · 13Comentarios · Fuente: niklasvh/html2canvas

DOMException: no se pudo establecer la propiedad 'adoptStyleSheets' en 'ShadowRoot': no se permite compartir hojas de estilo construidas en varios documentos

Fuente

ravatsinh

👍24

Comentario más útil

mismo problema usando en angular 8 e iónico 4

LucasManerich en 27 nov. 2019

👍20

Todos 13 comentarios

Tengo el mismo problema; cómo lidiar con ello ?

vernvn en 6 nov. 2019

mismo problema usando en angular 8 e iónico 4

LucasManerich en 27 nov. 2019

👍20

Mismo problema ionic4, ¿cómo solucionarlo?

UniqueAlex en 5 dic. 2019

Estoy enfrentando el mismo problema con ionic 5 ... ¿Alguien encontró alguna solución?

ricardooo1998 en 17 dic. 2019

Plan provisional de Yupeng en 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 en 20 dic. 2019

🚀3 👍3

@ G-yanpeng ¿Podría elaborar más su solución? Estoy tratando de hacer lo mismo para la versión iónica 4 angular8.

¡Gracias!

nuno en 22 dic. 2019

El mismo problema. ¿Alguien encontró alguna solución?

¡Gracias!

abritopach en 22 dic. 2019

@ G-yanpeng ¿Puede elaborar más su solución? Estoy tratando de hacer lo mismo para la versión iónica 4 angular8.
¡Gracias!

Angular8 tiene nuevos cambios, lo que hace que html2canvas no funcione correctamente. Luego está esta solución temporal, deje que html2canvas funcione fuera de angular, copie el dom que necesita generar la imagen en la misma capa que la entrada angular (app-root) para evitar la influencia causada por angular.

Angular8 tiene nuevos cambios que hacen que html2canvas no funcione correctamente. Luego está esta solución temporal para hacer que html2canvas funcione fuera de angular, copie el dom que necesita generar la imagen en la misma capa de la entrada angular (app-root) para evitar el impacto de angular.
- por el traductor de google

G-yanpeng en 24 dic. 2019

¿Puede proporcionar el código completo del archivo componente xxx.ts? También encontramos el mismo error al intentar exportar a .pdf. Excepto por este error, todo lo demás es normal. También puedo ver el archivo .pdf.
Este es mi codigo:
(Traducido al chino con el traductor de Google)
'
importar {Componente, OnInit} desde '@ angular / core';
importar {WcExpenditureCalcPipe} de'src / app / _pipes / wc -imony-calc.pipe ';
// exportar a pdf
importar {Enrutador} desde '@ angular / enrutador';
importar {ExportAsService, ExportAsConfig} from'ngx-export-as ';
importar {Plataforma} desde '@ ionic / angular';
importar {FileOpener} desde '@ ionic-native / file-opener / ngx';
importar {Archivo} de '@ ionic-native / file / ngx';
importar {FileTransfer, FileTransferObject} desde '@ 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');
    }

  }

'
El evento platform.ready realmente no es necesario. Estaba tratando de agregarlo a la carpeta 'Descargar' si es Android y a la carpeta 'Documentos' si es iOS.

ravimallya en 1 ene. 2020

@ravimallya
Actualicé el contenido en html2canvasservice.service.ts, pero no creo que te ayude. Cabe señalar que al usar este esquema temporal, las imágenes se pueden generar normalmente, pero aún se informará la excepción de lanzamiento.
Quizás pueda probar la generación de PDF usando JSPDF y html2canvas.

G-yanpeng en 3 ene. 2020

👍2

Plan provisional de Yupeng en 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;
        });
    }
}

¡Muchas gracias! ¡Gran solución!

kennethross en 4 may. 2020

Plan provisional de Yupeng en 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;
        });
    }
}

Recibo el siguiente error: "ERROR TypeError: html2canvas no es una función" en la siguiente llamada de función desde el servicio:

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

derek90 en 8 jun. 2020

Plan provisional de Yupeng en 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;
        });
    }
}

Esto funciona muy bien. Muchas gracias por la solución. Con elementos nativos iónicos (como ion-text, ion-icon dentro del elemento para copiar) esto no funciona. Pero cambié mis elementos iónicos a html. Ahora está funcionando perfecto.