Html2canvas: DOMException：「ShadowRoot」に「adoptedStyleSheets」プロパティを設定できませんでした：構築されたスタイルシートを複数のドキュメントで共有することは許可されていません

作成日 2019年11月04日  ·  13コメント  ·  ソース: niklasvh/html2canvas

DOMException：「ShadowRoot」に「adoptedStyleSheets」プロパティを設定できませんでした：構築されたスタイルシートを複数のドキュメントで共有することは許可されていません

picture ravatsinh
👍24

最も参考になるコメント

角度8とイオン4で使用する同じ問題

picture LucasManerich 2019年11月27日
👍20

全てのコメント13件

私は同じ問題を抱えています; どのように対処するのですか？

vernvn picture vernvn 2019年11月06日

角度8とイオン4で使用する同じ問題

LucasManerich picture LucasManerich 2019年11月27日
👍20

同じ問題ionic4、それを解決する方法は？

UniqueAlex picture UniqueAlex 2019年12月05日

私はイオン5で同じ問題に直面しています...誰かが解決策を見つけましたか？

ricardooo1998 picture 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 picture G-yanpeng 2019年12月20日
🚀3 👍3

@ G-yanpengソリューションについて詳しく教えていただけますか？ イオン4angular8バージョンでも同じことをしようとしています。

ありがとうございました！

nuno picture nuno 2019年12月22日

同じ問題。 誰かが解決策を見つけましたか？

ありがとう！

abritopach picture abritopach 2019年12月22日

@ G-yanpengソリューションについて詳しく教えていただけますか？イオン4angular8バージョンでも同じことをしようとしています。

ありがとうございました！

Angular8に新しい変更が加えられたため、html2canvasが正しく機能しなくなりました。次に、この一時的な解決策があります。html2canvasをAngularの外部で機能させ、画像を生成する必要のあるdomをAngularエントリ（app-root）と同じレイヤーにコピーして、Angularによる影響を回避します。

Angular8には、html2canvasが正しく機能しない原因となる新しい変更があります。次に、html2canvasをAngularの外部で機能させるためのこの一時的な解決策があり、画像を生成する必要があるdomをAngularエントリの同じレイヤー（app-root）にコピーして回避します角度の影響。
-グーグル翻訳で

image

G-yanpeng picture 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'から{Router}をインポートします。
'ngx-export-as'から{ExportAsService、ExportAsConfig}をインポートします。
'@ ionic / angular'から{プラットフォーム}をインポートします。
'@ ionic-native / file-opener / ngx'から{FileOpener}をインポートします。
'@ ionic-native / file / ngx'から{ファイル}をインポートします。
import {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');
    }

  }

`
platform.readyイベントは実際には必要ありません。Androidの場合は「Download」フォルダーに、iOSの場合は「Documents」フォルダーに追加しようとしました。

ravimallya picture ravimallya 2020年01月01日

@ravimallya
html2canvasservice.service.tsのコンテンツを更新しましたが、役に立たないと思います。 この一時的なスキームを使用すると、画像は正常に生成できますが、スロー例外が報告されることに注意してください。
おそらく、JSPDFとhtml2canvasを使用してPDF生成を試すことができます。

G-yanpeng picture 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 picture 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 afunction」というエラーが発生します。

return html2canvas(ele, option).then((canvas) => {
    if (canvas) {
        return canvas.toDataURL('image/png');
    }
    return null;
})
derek90 picture 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 picture venkatesanvaishali 2020年07月21日
このページは役に立ちましたか？
0 / 5 - 0 評価

関連する問題

rrutkows picture rrutkows  ·  4コメント
ABHIKSINGHH picture ABHIKSINGHH  ·  3コメント
wbarrantes picture wbarrantes  ·  3コメント
Loki180 picture Loki180  ·  4コメント
arzyu picture arzyu  ·  3コメント