Html2canvas: DOMException: Gagal menyetel properti 'adoptedStyleSheets' di 'ShadowRoot': Berbagi lembar gaya yang dibuat dalam banyak dokumen tidak diperbolehkan

Dibuat pada 4 Nov 2019 · 13Komentar · Sumber: niklasvh/html2canvas

DOMException: Gagal menyetel properti 'adoptedStyleSheets' di 'ShadowRoot': Berbagi lembar gaya yang dibuat dalam banyak dokumen tidak diperbolehkan

Sumber

ravatsinh

👍24

Komentar yang paling membantu

masalah yang sama digunakan dalam sudut 8 dan ionik 4

LucasManerich pada 27 Nov 2019

👍20

Semua 13 komentar

saya memiliki masalah yang sama; bagaimana menghadapinya?

vernvn pada 6 Nov 2019

masalah yang sama digunakan dalam sudut 8 dan ionik 4

LucasManerich pada 27 Nov 2019

👍20

Masalah yang sama ionic4, bagaimana cara mengatasinya?

UniqueAlex pada 5 Des 2019

Saya menghadapi masalah yang sama dengan ionic 5... Apakah ada yang menemukan solusi?

ricardooo1998 pada 17 Des 2019

Paket sementara dari Yupeng di 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 pada 20 Des 2019

🚀3 👍3

@G-yanpeng Bisakah Anda menjelaskan lebih lanjut solusi Anda? Saya mencoba melakukan hal yang sama untuk versi ionic 4 angular8.

Terima kasih!

nuno pada 22 Des 2019

Permasalahan yang sama. Apakah seseorang menemukan solusi?

Terima kasih!

abritopach pada 22 Des 2019

@G-yanpeng Bisakah Anda menjelaskan lebih lanjut solusi Anda? Saya mencoba melakukan hal yang sama untuk versi ionic 4 angular8.
Terima kasih!

Angular8 memiliki perubahan baru, yang menyebabkan html2canvas tidak berfungsi dengan baik. Lalu ada solusi sementara ini, biarkan html2canvas bekerja di luar angular, salin dom yang perlu menghasilkan gambar ke lapisan yang sama dengan entri angular (app-root) untuk menghindari pengaruh yang disebabkan oleh angular.

Angular8 memiliki perubahan baru yang menyebabkan html2canvas tidak berfungsi dengan baik. Lalu ada solusi sementara ini untuk membuat html2canvas berfungsi di luar sudut, salin dom yang perlu menghasilkan gambar ke lapisan yang sama dari entri sudut (akar aplikasi) untuk menghindari dampak sudut.
- oleh google terjemahan

G-yanpeng pada 24 Des 2019

Bisakah Anda memberikan kode lengkap file komponen xxx.ts? Kami juga mengalami kesalahan yang sama saat mencoba mengekspor ke .pdf. Kecuali untuk kesalahan ini, yang lainnya normal. Saya juga dapat melihat file .pdf.
Ini kode saya:
(Diterjemahkan ke bahasa Cina menggunakan penerjemah Google)
`
import {Komponen, OnInit} from'@angular/core';
impor {WcExpenditureCalcPipe} dari'src/app/_pipes/wc-expenditure-calc.pipe';
// ekspor ke pdf
impor {Router} from'@angular/router';
impor {ExportAsService, ExportAsConfig} from'ngx-export-as';
impor {Platform} from'@ionic/angular';
impor {FileOpener} from'@ionic-native/file-opener/ngx';
impor {File} from'@ionic-native/file/ngx';
impor {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');
    }

  }

`
Acara platform.ready benar-benar tidak diperlukan. Saya mencoba menambahkan ke folder 'Unduh' jika itu adalah folder Android dan 'Dokumen' jika itu iOS.

ravimallya pada 1 Jan 2020

@ravimallya
Saya memperbarui konten di html2canvasservice.service.ts, tetapi menurut saya itu tidak akan membantu Anda. Perlu dicatat bahwa menggunakan skema sementara ini, gambar dapat dihasilkan secara normal, tetapi pengecualian lemparan masih akan dilaporkan.
Mungkin Anda dapat mencoba pembuatan PDF menggunakan JSPDF dan html2canvas.

G-yanpeng pada 3 Jan 2020

👍2

Paket sementara dari Yupeng di 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;
        });
    }
}

Terima kasih banyak! Solusi yang bagus!

kennethross pada 4 Mei 2020

Paket sementara dari Yupeng di 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;
        });
    }
}

Saya mendapatkan kesalahan berikut: "ERROR TypeError: html2canvas is not a function" dalam panggilan fungsi berikut dari layanan:

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

derek90 pada 8 Jun 2020

Paket sementara dari Yupeng di 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;
        });
    }
}

Ini bekerja sangat baik. Terima kasih banyak atas solusinya. Dengan elemen asli ionik (seperti teks ion, ikon ion di dalam elemen untuk disalin) ini tidak berfungsi. Tetapi saya mengubah elemen ionik saya menjadi html. Sekarang bekerja dengan sempurna.

venkatesanvaishali pada 21 Jul 2020

Apakah halaman ini membantu?

0 / 5 - 0 peringkat

Masalah terkait

Perpustakaan sampah seperti itu

kunal886496 · 3Komentar

Tidak dapat mengambil tangkapan layar dari div yang dimuat secara dinamis

bishwapoudel · 4Komentar

posisi gulir tidak dapat ditangkap di 1.0.0-alpha.1

AlphaDu · 4Komentar

saat menggunakan html2canvas, mengapa gambar dengan url online tidak muncul di hasil, apakah ada yang mengetahuinya? tolong beritahu saya, terima kasih!

Juliazhong · 4Komentar

[Safari 10.1.2] Tidak dapat merender Ikon FontAwesome di kanvas.

stevencherry1 · 3Komentar