Html2canvas: DOMException: 'ShadowRoot'에서 'adoptedStyleSheets' 속성을 설정하지 못했습니다: 여러 문서에서 생성된 스타일시트를 공유하는 것은 허용되지 않습니다.

에 만든 2019년 11월 04일 · 13코멘트 · 출처: niklasvh/html2canvas

DOMException: 'ShadowRoot'에서 'adoptedStyleSheets' 속성을 설정하지 못했습니다: 여러 문서에서 생성된 스타일시트를 공유하는 것은 허용되지 않습니다.

출처

ravatsinh

👍24

가장 유용한 댓글

각도 8 및 이온 4에서 사용하는 동일한 문제

LucasManerich 에 2019년 11월 27일

👍20

모든 13 댓글

나도 같은 문제를 안고있어; 그것을 처리하는 방법?

vernvn 에 2019년 11월 06일

각도 8 및 이온 4에서 사용하는 동일한 문제

LucasManerich 에 2019년 11월 27일

👍20

같은 문제 ionic4, 그것을 해결하는 방법?

UniqueAlex 에 2019년 12월 05일

나는 ionic 5와 같은 문제에 직면하고 있습니다 ... 누군가 해결책을 찾았습니까?

ricardooo1998 에 2019년 12월 17일

ionic4의 Yupeng에서 중간 계획

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 에 2019년 12월 20일

🚀3 👍3

@G-yanpeng 솔루션을 더 자세히 설명해 주시겠습니까? ionic 4 angular8 버전에 대해서도 동일한 작업을 시도하고 있습니다.

감사합니다!

nuno 에 2019년 12월 22일

같은 문제. 누군가 해결책을 찾았습니까?

감사 해요!

abritopach 에 2019년 12월 22일

@G-yanpeng 솔루션을 더 자세히 설명해 주시겠습니까?Ionic 4 angular8 버전에서도 동일한 작업을 시도하고 있습니다.
감사합니다!

Angular8에는 html2canvas가 제대로 작동하지 않는 새로운 변경 사항이 있습니다. 그런 다음 이 임시 솔루션이 있습니다. html2canvas가 각도 외부에서 작동하도록 하고, 각도로 인한 영향을 피하기 위해 각도 항목(앱 루트)과 동일한 레이어에 이미지를 생성하는 데 필요한 dom을 복사합니다.

Angular8에는 html2canvas가 제대로 작동하지 않는 새로운 변경 사항이 있습니다.그런 다음 html2canvas가 angular 외부에서 작동하도록 하는 임시 솔루션이 있습니다. 각도의 영향.
- 구글 번역으로

G-yanpeng 에 2019년 12월 24일

xxx.ts 구성 요소 파일의 전체 코드를 제공할 수 있습니까? .pdf로 내보내려고 할 때도 동일한 오류가 발생했습니다. 이 오류를 제외하고 다른 모든 것은 정상입니다. .pdf 파일도 볼 수 있습니다.
이것은 내 코드입니다.
(Google 번역기를 사용하여 중국어로 번역)
`
'@angular/core'에서 {Component, OnInit} 가져오기;
'src/app/_pipes/wc-expenditure-calc.pipe'에서 {WcExpenditureCalcPipe} 가져오기';
// pdf로 내보내기
'@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 이벤트는 정말 필요하지 않은데, 안드로이드라면 '다운로드' 폴더에, iOS라면 '문서' 폴더에 추가하려고 했습니다.

ravimallya 에 2020년 01월 01일

@ravimallya
html2canvasservice.service.ts의 내용을 업데이트했지만 도움이 되지 않을 것 같습니다. 이 임시 체계를 사용하면 이미지가 정상적으로 생성될 수 있지만 예외가 계속 보고된다는 점에 유의해야 합니다.
아마도 JSPDF 및 html2canvas를 사용하여 PDF 생성을 시도할 수 있습니다.

G-yanpeng 에 2020년 01월 03일

👍2

ionic4의 Yupeng에서 중간 계획

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 에 2020년 05월 04일

ionic4의 Yupeng에서 중간 계획

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 is not a function" 오류가 발생합니다.

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

derek90 에 2020년 06월 08일

ionic4의 Yupeng에서 중간 계획

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로 변경했습니다. 이제 완벽하게 작동합니다.

venkatesanvaishali 에 2020년 07월 21일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Html2canvas: DOMException: 'ShadowRoot'에서 'adoptedStyleSheets' 속성을 설정하지 못했습니다: 여러 문서에서 생성된 스타일시트를 공유하는 것은 허용되지 않습니다.

가장 유용한 댓글

모든 13 댓글

ionic4의 Yupeng에서 중간 계획

ionic4의 Yupeng에서 중간 계획

ionic4의 Yupeng에서 중간 계획

ionic4의 Yupeng에서 중간 계획

관련 문제