html2canvas 和 jsPDF 部分灰色部分答案

【问题标题】：html2canvas and jsPDF partial gray sectionhtml2canvas 和 jsPDF 部分灰色部分
【发布时间】：2019-11-27 11:54:36
【问题描述】：

我正在尝试使用 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，这个问题就会消失，但图表边框会变成完全白色（它们位于材料卡容器内，也必须出现）。

比例 == 2

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

想要的结果

【问题讨论】：

标签： image background jspdf html2canvas

【解决方案1】：

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

【讨论】：

【解决方案2】：

我对这个灰色背景也有同样的问题，这里有一个可以帮助你的解决方案：用这样的 id 在表格中制作图表：

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

每个图表都应该包含在表格中

【讨论】：

【解决方案3】：

在我意识到灰色背景颜色在body 中后，我解决了这个问题。似乎html2canvas 没有得到父母的风格。因此，我不得不在每个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");

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

【讨论】：