Html2canvas: DOMException: فشل تعيين خاصية "updatedStyleSheets" على "ShadowRoot": غير مسموح بمشاركة أوراق الأنماط المُنشأة في مستندات متعددة

تم إنشاؤها على ٤ نوفمبر ٢٠١٩ · 13تعليقات · مصدر: niklasvh/html2canvas

DOMException: فشل تعيين خاصية "updatedStyleSheets" على "ShadowRoot": غير مسموح بمشاركة أوراق الأنماط المُنشأة في مستندات متعددة

مصدر

ravatsinh

👍24

التعليق الأكثر فائدة

نفس المشكلة باستخدام الزاوية 8 والأيونية 4

LucasManerich في ٢٧ نوفمبر ٢٠١٩

👍20

ال 13 كومينتر

لدي نفس المشكلة؛ كيفية التعامل معها ؟

vernvn في ٦ نوفمبر ٢٠١٩

نفس المشكلة باستخدام الزاوية 8 والأيونية 4

LucasManerich في ٢٧ نوفمبر ٢٠١٩

👍20

نفس المشكلة ionic4 ، كيف تحلها؟

UniqueAlex في ٥ ديسمبر ٢٠١٩

أواجه نفس المشكلة مع أيونك 5 ... هل وجد أي شخص أي حل؟

ricardooo1998 في ١٧ ديسمبر ٢٠١٩

خطة مؤقتة من 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 في ٢٠ ديسمبر ٢٠١٩

🚀3 👍3

@ G - yanpeng هل يمكنك من فضلك توضيح المزيد من الحل الخاص بك؟ أنا أحاول أن أفعل الشيء نفسه بالنسبة للإصدار 4 angular8 الأيوني.

شكرا لك!

nuno في ٢٢ ديسمبر ٢٠١٩

نفس المشكلة. هل وجد أحد أي حل؟

شكرا!

abritopach في ٢٢ ديسمبر ٢٠١٩

@ G-yanpeng هل يمكنك من فضلك توضيح المزيد من الحل الخاص بك؟
شكرا لك!

يحتوي Angular8 على تغييرات جديدة ، مما يؤدي إلى عدم عمل html2canvas بشكل صحيح. ثم هناك هذا الحل المؤقت ، دع html2canvas يعمل خارج الزاوية ، انسخ dom الذي يحتاج إلى إنشاء الصورة إلى نفس الطبقة مثل الإدخال الزاوي (app-root) لتجنب التأثير الناجم عن الزاوية.

يحتوي Angular8 على تغييرات جديدة تؤدي إلى عدم عمل html2canvas بشكل صحيح. ثم هناك هذا الحل المؤقت لجعل html2canvas يعمل خارج الزاوية ، انسخ dom الذي يحتاج إلى إنشاء الصورة إلى نفس طبقة الإدخال الزاوي (app-root) لتجنب تأثير الزاوي.
- ترجمة جوجل

G-yanpeng في ٢٤ ديسمبر ٢٠١٩

هل يمكنك تقديم الكود الكامل لملف المكون xxx.ts؟ لقد واجهنا أيضًا نفس الخطأ عند محاولة التصدير إلى .pdf. باستثناء هذا الخطأ ، كل شيء آخر طبيعي. يمكنني أيضًا عرض ملف pdf.
هذا هو الكود الخاص بي:
(مترجم إلى اللغة الصينية باستخدام مترجم جوجل)
"
استيراد {Component، OnInit} من "@ angular / core" ؛
استيراد {WcExpenditureCalcPipe} من'src / app / _pipes / wc -overty-calc.pipe '؛
// تصدير إلى pdf
استيراد {Router} من "@ angular / router" ؛
استيراد {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 في ١ يناير ٢٠٢٠

تضمين التغريدة
لقد قمت بتحديث المحتوى في html2canvasservice.service.ts ، لكنني لا أعتقد أنه سيساعدك. وتجدر الإشارة إلى أنه باستخدام هذا المخطط المؤقت ، يمكن إنشاء الصور بشكل طبيعي ، ولكن سيظل الإبلاغ عن استثناءات الطرح.
ربما يمكنك تجربة إنشاء ملفات PDF باستخدام JSPDF و html2canvas.

G-yanpeng في ٣ يناير ٢٠٢٠

👍2

خطة مؤقتة من 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;
        });
    }
}

شكرا جزيلا! حل رائع!

kennethross في ٤ مايو ٢٠٢٠

خطة مؤقتة من 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;
        });
    }
}

تلقيت الخطأ التالي: "خطأ في نوع الخطأ: html2canvas ليست دالة" في استدعاء الوظيفة التالي من الخدمة:

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

derek90 في ٨ يونيو ٢٠٢٠

خطة مؤقتة من 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;
        });
    }
}

هذا يعمل بشكل جيد جدا. شكرا جزيلا على الحل لك. مع العناصر الأصلية الأيونية (مثل النص الأيوني ، والأيقونة الأيونية داخل العنصر المراد نسخه) هذا لا يعمل. لكنني غيرت عناصري الأيونية إلى html. الآن تعمل بشكل مثالي.