html2canvas和jsPDF部分灰色部分

Question

html2canvas我正在尝试使用和从 HTML 创建 PDF jsPDF。首先，我获取所有想要传递给 PDF 的 html 元素image，然后将它们一一添加，如下所示：

   var quality = 1
   var report1 = null
   var report2 = null
   var report3 = null
   var report4 = null
   var report5 = null
   var header = null

   html2canvas(document.querySelector('header'), {scale: quality})
        .then(canvas => {
            header = canvas
            html2canvas(document.querySelector('#report-1'), {scale: quality})
            .then(canvas => {
                report1 = canvas
                html2canvas(document.querySelector('#report-2'), {scale: quality})
                .then(canvas => {
                    report2 = canvas
                    html2canvas(document.querySelector('#report-3'), {scale: quality})
                        .then(canvas => {
                            report3 = canvas
                            html2canvas(document.querySelector('#report-4'), {scale: quality})
                                .then(canvas => {
                                    report4 = canvas
                                    html2canvas(document.querySelector('#report-5'), {scale: quality})
                                        .then(canvas => {
                                            report5 = canvas


                                            var imgDataHeader = header.toDataURL('image/png');
                                            var imgWidth = 210; 
                                            var imgHeight = header.height * imgWidth / header.width;
                                            var doc = new jsPDF('p', 'mm', 'A4');
                                            var position = 0
                                            doc.addImage(imgDataHeader, 'PNG', 0, position, imgWidth, imgHeight);
                                            position += imgHeight + 15;


                                            var imgDataReport1 = report1.toDataURL('image/png')
                                            imgHeight = report1.height * imgWidth / report1.width;
                                            doc.addImage(imgDataReport1, 'PNG', 0, position, imgWidth, imgHeight);
                                            position += imgHeight + 5;

                                            var imgDataReport2 = report2.toDataURL('image/png');
                                            imgHeight = report2.height * imgWidth / report2.width;
                                            doc.addImage(imgDataReport2, 'PNG', 0, position, imgWidth, imgHeight);
                                            position += imgHeight + 5;



                                            doc.addPage();
                                            position = 0


                                            imgDataHeader = header.toDataURL('image/png');
                                            imgHeight = header.height * imgWidth / header.width;
                                            doc.addImage(imgDataHeader, 'PNG', 0, position, imgWidth, imgHeight);
                                            position += imgHeight + 15;

                                            var imgDataReport3 = report3.toDataURL('image/png');
                                            imgHeight = report3.height * imgWidth / report3.width;
                                            doc.addImage(imgDataReport3, 'PNG', 0, position, imgWidth, imgHeight);
                                            position += imgHeight + 5;


                                            var imgDataReport4 = report4.toDataURL('image/png');
                                            imgHeight = report4.height * imgWidth / report4.width;
                                            doc.addImage(imgDataReport4, 'PNG', 0, position, imgWidth, imgHeight);
                                            position += imgHeight + 5;


                                            doc.addPage();
                                            position = 0

                                            imgDataHeader = header.toDataURL('image/png');
                                            imgHeight = header.height * imgWidth / header.width;
                                            doc.addImage(imgDataHeader, 'PNG', 0, position, imgWidth, imgHeight);
                                            position += imgHeight + 15;

                                            var imgDataReport5 = report5.toDataURL('image/png');
                                            imgHeight = report5.height * imgWidth / report5.width;
                                            doc.addImage(imgDataReport5, 'PNG', 0, position, imgWidth, imgHeight);
                                            position += imgHeight + 5;


                                            doc.save( 'file-.pdf');
                                        })
                                })
                        })
                    })
             })
        })        

问题是，除了第一个干净区域外，其余元素（理论上具有白色背景）显示为灰色背景。

规模 == 1

如果我增加scale html2canvas option这个问题就会消失，但图表边框会变成全白色（它们位于材料卡容器内，该容器也必须出现）。

比例 == 2

我尝试更改 html2canvas选项中可用的其他选项，但没有任何变化。

期望的结果

Answer 1

对于那些因找不到任何答案而真正苦苦挣扎的人，请尝试在配置中添加“scale：2”。这个简单的关键字解决了有关显示灰色背景的所有问题。