html2canvas + jsPDFで複数ページのPDF出力する際、白紙になってしまう原因の解消

実現したいこと

CakePHP＋Chart.jsで作ったページをPDF化し、html2canvas＋jsPDFでダウンロードさせたいです

前提

CakePHP4で、各種データをグラフ化するシステムを作っています。
出力したグラフはChart.jsで作成しているのですが、グラフをそのまま出力したい、
日本語フォントも見たまま出力したいという要望から、
画面のスクリーンショットを撮るhtml2canvasと、javascriptでPDF化できるjsPDFを組み合わせることにしました。

しかし、以下のような単純な動作であればうまく動きはするのですが、

javascript
1        html2canvas(document.body, {
2            onrendered: function(canvas) {
3                var dataURI = canvas.toDataURL();
4                var pdf = new jsPDF({
5                    format: 'a4',
6                    orientation: 'L',
7                });
8                // 横幅をぴったり合わせたかったので横幅を取得して指定してます
9                var width = pdf.internal.pageSize.width;
10                pdf.addImage(canvas, 'JPEG', 0, 0, width, 0);
11                pdf.save('test.pdf')
12            }
13        });

以下のように少し複雑な動きをさせると、全ページが真っ白になってしまいます。

javascript
1        var pdf = new jsPDF({
2            format: 'a4',
3            orientation: 'L',
4        });
5        var index = 0;
6        $('.content').each(function() {
7            if (index > 0) { pdf.addPage(); }
8
9            var id = $(this).attr('id');
10            html2canvas(document.getElementById(id), {
11                onrendered: function(canvas) {
12                    var dataURI = canvas.toDataURL();
13                    var pdf = new jsPDF({
14                        format: 'a4',
15                        orientation: 'L',
16                    });
17                    // // 横幅をぴったり合わせたかったので横幅を取得して指定してます
18                    var width = pdf.internal.pageSize.width;
19                    pdf.addImage(canvas, 'JPEG', 0, 0, width, 0);
20                }
21            });
22            index++;
23        });
24        pdf.save('test.pdf');

上記の内容の解決方法をご存知の方がいらっしゃったら、ぜひ教えていただきたいです。
よろしくお願いいたします。

試したこと

・html2canvasの第一引数を「document.getElementById()に書き直し
→これは問題なく動作

・each文で取得している部分をベタ書きにしてみる
→複数回html2canvasを実行すると、同様に白紙になる
→html2canvasは複数回の実行ができない？

補足情報（FW/ツールのバージョンなど）

jQuery：2.1.4
Chart.js：2.9.3
jsPdf：1.3.3
html2canvas：0.4.1

行動規範の内容に同意します

回答1件

自己解決

自己解決しましたので、ご報告です。
まず、html2canvasのバージョンが古かったので少しバージョンアップした上で、Promiseを利用して以下のように修正しました。

javascript
1
2        var pdf = new jsPDF({
3            format: 'a4',
4            orientation: 'L',
5        });
6        var width = pdf.internal.pageSize.width;
7        var index = 1;
8        var canvases = [];
9        // ページ分のデータをPromiseでセット
10        $('.content').each(function () {
11            if (index > 1) {
12                // 複数ページにまたがる場合はページを追加
13                pdf.addPage();
14            }
15            var id = $(this).attr('id');
16            canvases.push(new Promise(function(resolve, reject) {
17                const pageCount = index;      // このfunction用に変数を保持
18                html2canvas(document.getElementById(id)).then((canvas) => {
19                    var dataURI = canvas.toDataURL();
20                    pdf.setPage(pageCount);
21                    pdf.addImage(canvas, 'JPEG', 0, 0, width, 0);
22                    resolve();
23                });
24            }));
25            index++;
26        });
27
28        Promise.all(canvases).then(function() {
29            // 全ての処理が完了したらPDF出力
30            pdf.save('test1.pdf');
31        })
32