javascript - 使用 jsPDF 导出 Google 图表适用于 Chrome，但不适用于 Firefox(文档中的空白图像)

Question

                        var doc = new jsPDF();
                        doc.setFontSize(30);
                        doc.setTextColor(244, 070, 017);
                        doc.setFont("courier");
                        doc.setFontType("normal");
                        doc.text(35, 25, '<?php echo "Accessi ".$months[$_POST['month']]." ".$_POST['year']; ?>');
                        function getImgData(chartContainer) {
                            var chartArea = chartContainer.getElementsByTagName('svg')[0].parentNode;
                            var svg = chartArea.innerHTML;
                            var chartDoc = chartContainer.ownerDocument;
                            var canvas = chartDoc.createElement('canvas');
                            canvas.setAttribute('width', chartArea.offsetWidth);
                            canvas.setAttribute('height', chartArea.offsetHeight);


                            canvas.setAttribute(
                                'style',
                                'position: absolute; ' +
                                'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
                                'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
                            chartDoc.body.appendChild(canvas);
                            canvg(canvas, svg);
                            var imgData = canvas.toDataURL('image/JPEG');
                            doc.addImage(imgData, "JPEG", 0,30); 
                            canvas.parentNode.removeChild(canvas);
                            return imgData;
                          }

                    $( document ).ready(function() {

                        $('#pdfBtn').click(function () {   
                            var chartContainer = document.getElementById('line_div');
                            var chartDoc = chartContainer.ownerDocument;
                            var img = chartDoc.createElement('img');
                            img.src = getImgData(chartContainer);
                            doc.save('grafico.pdf');
                        });

                    });
                        google.load("visualization", "1", {packages:["corechart"]});
                        google.setOnLoadCallback(drawChart);
                        function drawChart()
                        {
                            var data = new google.visualization.DataTable();
                            data.addColumn('string', 'Giorni');
                            data.addColumn('number', 'Numero accessi');

                            data.addRows([
                            <?php
                            for ($i = 1; $i < $days; $i++) {
                                echo "['".$i."', ".$dati[$i]."], ";
                            }
                            echo "['".$i."', ".$dati[$i]."]";
                            ?>
                            ]);

                            var chart_div = document.getElementById('line_div');
                            var chart = new google.visualization.LineChart(line_div);


                            chart.draw(data, {
                                width: 780,
                                height: 340,
                                legend: 'right',
                                title: ''
                            });
                        }
                    </script>

                    <div id="line_div"></div>
                    <button id="pdfBtn">Salva PDF</button>

这是我的 Google 图表，它从 PHP 获取数据并使用 addRows 中的 for 循环填充图表。我添加了一个按钮 (pdfBtn)，它可以让我导出使用 jsPDF 创建的文档。一切都适用于所有浏览器，但使用 Firefox，我得到的是黑色图像，而不是导出文档中的图表。我尝试将格式更改为 PNG，但得到的是白色图像而不是黑色。我知道它与 JPEG 和 PNG 的背景颜色属性有关，但我尝试设置 CSS 但没有任何效果。我真的不知道如何解决这个问题。然而，pdfBtn 无法在 Internet Explorer 上运行，但我很高兴首先在 Firefox 上解决该问题。

Answer 1

我在通过 canvg 库转换 SVG 时遇到了同样的问题。您应该在调用 canvg 之前清理 SVG 文件。就我而言，它删除了具有自定义命名空间的所有属性，并从 svg 元素中删除了 height="Infinity"。