Html2canvas: DOMException: 'ShadowRoot' पर 'गोद ली गई स्टाइलशीट' प्रॉपर्टी सेट करने में विफल: कई दस्तावेज़ों में निर्मित स्टाइलशीट साझा करने की अनुमति नहीं है

को निर्मित 4 नव॰ 2019 · 13टिप्पणियाँ · स्रोत: niklasvh/html2canvas

DOMException: 'ShadowRoot' पर 'गोद ली गई स्टाइलशीट' प्रॉपर्टी सेट करने में विफल: कई दस्तावेज़ों में निर्मित स्टाइलशीट साझा करने की अनुमति नहीं है

स्रोत

ravatsinh

👍24

सबसे उपयोगी टिप्पणी

कोणीय 8 और आयनिक 4 . में उपयोग करने में एक ही समस्या

LucasManerich 27 नव॰ 2019

👍20

सभी 13 टिप्पणियाँ

मुझे भी यही समस्या है; इसका सामना कैसे करें ?

vernvn 6 नव॰ 2019

कोणीय 8 और आयनिक 4 . में उपयोग करने में एक ही समस्या

LucasManerich 27 नव॰ 2019

👍20

वही समस्या आयनिक 4, इसे कैसे हल करें?

UniqueAlex 5 दिस॰ 2019

मैं आयनिक 5 के साथ एक ही समस्या का सामना कर रहा हूँ... क्या किसी को कोई समाधान मिला?

ricardooo1998 17 दिस॰ 2019

आयनिक4 . में युपेंग से अंतरिम योजना

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 20 दिस॰ 2019

🚀3 👍3

@ जी-यानपेंग क्या आप कृपया अपना समाधान विस्तृत कर सकते हैं? मैं आयनिक 4 कोणीय 8 संस्करण के लिए भी ऐसा ही करने की कोशिश कर रहा हूं।

शुक्रिया!

nuno 22 दिस॰ 2019

समान समस्या। क्या किसी को कोई समाधान मिला?

धन्यवाद!

abritopach 22 दिस॰ 2019

@ जी-यानपेंग क्या आप कृपया अपने समाधान को और विस्तृत कर सकते हैं?मैं आयनिक 4 कोणीय 8 संस्करण के लिए भी ऐसा ही करने की कोशिश कर रहा हूं।
शुक्रिया!

Angular8 में नए बदलाव हैं, जिसके कारण html2canvas ठीक से काम नहीं कर रहा है। फिर यह अस्थायी समाधान है, html2canvas को कोणीय के बाहर काम करने दें, उस डोम को कॉपी करें जिसे कोणीय के कारण होने वाले प्रभाव से बचने के लिए कोणीय प्रविष्टि (ऐप-रूट) के समान परत पर छवि उत्पन्न करने की आवश्यकता होती है।

Angular8 में नए बदलाव हैं जो html2canvas को ठीक से काम नहीं करने का कारण बनते हैं। फिर html2canvas को कोणीय के बाहर काम करने के लिए यह अस्थायी समाधान है, उस डोम को कॉपी करें जिससे बचने के लिए कोणीय प्रविष्टि (ऐप-रूट) की एक ही परत पर छवि उत्पन्न करने की आवश्यकता हो कोणीय का प्रभाव।
- गूगल ट्रांसलेट द्वारा

G-yanpeng 24 दिस॰ 2019

क्या आप xxx.ts घटक फ़ाइल का पूरा कोड प्रदान कर सकते हैं? .pdf में निर्यात करने का प्रयास करते समय भी हमें उसी त्रुटि का सामना करना पड़ा। इस त्रुटि को छोड़कर बाकी सब कुछ सामान्य है। मैं .pdf फ़ाइल भी देख सकता हूँ।
यह मेरा कोड है:
(Google अनुवादक का उपयोग करके चीनी में अनुवादित)
`
'@angular/core' से {घटक, ऑनइनिट} आयात करें;
'src/app/_pipes/wc-expenditure-calc.pipe' से {WcExpenditureCalcPipe} आयात करें;
// पीडीएफ में निर्यात करें
{Router} को'@angular/router' से इंपोर्ट करें;
'ngx-export-as' से {ExportAsService, ExportAsConfig} आयात करें;
{प्लेटफ़ॉर्म} को'@ionic/angular' से इंपोर्ट करें;
'@ionic-native/file-opener/ngx' से {FileOpener} आयात करें;
{फ़ाइल} को'@ionic-native/file/ngx' से आयात करें;
'@ionic-native/file-transfer/ngx' से {FileTransfer, FileTransferObject} आयात करें;

  @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 घटना वास्तव में आवश्यक नहीं है। मैं 'डाउनलोड' फ़ोल्डर में जोड़ने की कोशिश कर रहा था अगर यह एंड्रॉइड है और अगर यह आईओएस है तो 'दस्तावेज़' फ़ोल्डर।

ravimallya 1 जन॰ 2020

@रविमल्या
मैंने सामग्री को html2canvasservice.service.ts में अपडेट किया है, लेकिन मुझे नहीं लगता कि यह आपकी मदद करेगा। यह ध्यान दिया जाना चाहिए कि इस अस्थायी योजना का उपयोग करके, छवियों को सामान्य रूप से उत्पन्न किया जा सकता है, लेकिन थ्रो अपवाद अभी भी रिपोर्ट किया जाएगा।
शायद आप JSPDF और html2canvas का उपयोग करके पीडीएफ पीढ़ी का प्रयास कर सकते हैं।

G-yanpeng 3 जन॰ 2020

👍2

आयनिक4 . में युपेंग से अंतरिम योजना

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 4 मई 2020

आयनिक4 . में युपेंग से अंतरिम योजना

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;
        });
    }
}

मुझे निम्न त्रुटि मिलती है: "ERROR TypeError: html2canvas कोई फ़ंक्शन नहीं है" सेवा से निम्न फ़ंक्शन कॉल में:

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

derek90 8 जून 2020

आयनिक4 . में युपेंग से अंतरिम योजना

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;
        });
    }
}

यह बहुत अच्छा काम करता है। समाधान के लिए बहुत-बहुत धन्यवाद। आयनिक मूल तत्वों के साथ (जैसे आयन-पाठ, प्रतिलिपि करने के लिए तत्व के अंदर आयन-आइकन) यह काम नहीं कर रहा है। लेकिन मैंने अपने आयनिक तत्वों को एचटीएमएल में बदल दिया। अब यह एकदम सही काम कर रहा है।

venkatesanvaishali 21 जुल॰ 2020

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

सबसे उपयोगी टिप्पणी

सभी 13 टिप्पणियाँ

आयनिक4 . में युपेंग से अंतरिम योजना

आयनिक4 . में युपेंग से अंतरिम योजना

आयनिक4 . में युपेंग से अंतरिम योजना

आयनिक4 . में युपेंग से अंतरिम योजना

संबंधित मुद्दों