html2canvas和jsPDF部分灰色部分

Question

我正在尝试使用 html2canvas 和 jsPDF 从 HTML 创建 PDF。首先，我将要传递给 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，这个问题就会消失，但图表边框会变成全白（它们在 material 卡片容器内，它也必须出现）。

规模== 2

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

想要的结果

Answer 1

发现body中的背景色是灰色后解决了问题。似乎 html2canvas 没有得到 parent 的风格。因此，我必须在每个 div、scale = 2 中添加 style="background:#f5f5f5f5"，并使用灰度 setFillColor 选项在 pdf 页面中添加相同的背景：

var doc = new jsPDF('p', 'mm', 'A4');
doc.setFillColor(245);
doc.rect(0, 0, 210, 700, "F");

也许这是一种解决方法，但对我来说已经足够了。

Answer 2

我遇到了同样的灰色背景问题，这里有一个可以帮助您的解决方案：将您的图表放入 A Table 中，id 如下：

<table id="report-1">
     <tr>
       <td>
        <!-- Your Chart Here -->
       </td>
     </tr>
</table>

每个图表都应包含 Table

Answer 3

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

html2canvas和jsPDF部分灰色部分

html2canvas and jsPDF partial gray section

background

image

html2canvas

jspdf