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>

これは私の Google Chart で、PHP からデータを取得し、addRows の for サイクルを使用してグラフに入力します。jsPDF で作成したドキュメントをエクスポートできるボタン (pdfBtn) を追加しました。すべてがすべてのブラウザーで機能しますが、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 に答える