image - html2canvas和jsPDF部分灰色部分

Question

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

   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 选项，这个问题就会消失，但图表边框会变成全白(它们位于必须出现的 Material 卡容器内)。

比例 == 2

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

想要的结果

Answer 1

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