1 

                        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>

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

4

2 回答 2

0

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

于 2015-11-26T19:09:18.030 回答
0

我通过替换解决了与 Google Charts + wkhtmltopdf 类似的问题：

<script src="http://www.gstatic.com/charts/loader.js"></script>

经过

<script src="http://www.google.com/jsapi"></script>

不知何故，wkhtmltopdf 库无法处理包含第一个 javascript 包含的 Google Chart html 页面。

于 2016-03-18T08:03:58.697 回答