javascript 将谷歌图表另存为 pdf

Save google charts as pdf

提问by Learner2011

I am trying to save the piechart as a pdf file as in http://keepcoding.ehsanabbasi.com/php/convert-google-chart-to-png-and-pdf/Having javascript inside php.chartsrc shows up the following value rather than the png image source

我正在尝试将 饼图保存为 pdf 文件，如http://keepcoding.ehsanabbasi.com/php/convert-google-chart-to-png-and-pdf/在 php.chartsrc 中有 javascript 显示以下值而不是 png 图像源

"function (){if(!this.b||!this.$||!this.Ua)throw m("Chart has not finished drawing.");var a=new Ql(this.V,this.Aa),b=Tl(this.ma)[Wb](ih),a=YO(b,a),a=new EO(b,a),c=new RO(b),a=this.sO(c,a),c=yY(this.ig,this.$,this.Ua);a.Lp(this.$,c);return b[cc][0].toDataURL(Ssa)} failed (filesystem path '/var/www/html/function (){if(!this.b||!this.$||!this.Ua)throw m("Chart has not finished drawing.");var a=new Ql(this.V,this.Aa),b=Tl(this.ma)[Wb](ih),a=YO(b,a),a=new EO(b,a),c=new RO(b),a=this.sO(c,a),c=yY(this.ig,this.$,this.Ua);a.Lp(this.$,c);return b[cc][0].toDataURL(Ssa)}')"

“ function (){if(!this.b||!this.$||!this.Ua)throw m("Chart has not finished drawing.");var a=new Ql(this.V,this.Aa),b=Tl(this.ma)[Wb](ih),a=YO(b,a),a=new EO(b,a),c=new RO(b),a=this.sO(c,a),c=yY(this.ig,this.$,this.Ua);a.Lp(this.$,c);return b[cc][0].toDataURL(Ssa)} failed (filesystem path '/var/www/html/function (){if(!this.b||!this.$||!this.Ua)throw m("Chart has not finished drawing.");var a=new Ql(this.V,this.Aa),b=Tl(this.ma)[Wb](ih),a=YO(b,a),a=new EO(b,a),c=new RO(b),a=this.sO(c,a),c=yY(this.ig,this.$,this.Ua);a.Lp(this.$,c);return b[cc][0].toDataURL(Ssa)}')”

 $script ="

        google.setOnLoadCallback(drawChart);
        function drawChart() { //code for drawing chart}
        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        google.visualization.events.addListener(chart, 'ready', function ()      {
        var chartsrc = chart.getImageURI();
     });

      $doc->addScriptDeclaration($script);
      echo "<div id='piechart'></div>";

回答by Kevin Brown

We added support in our @cloudformatter to support all Google Charts output to PDF, Image, XPS and other formats. You can take a look at the links below.

我们在@cloudformatter 中添加了支持，以支持所有 Google 图表输出为 PDF、图像、XPS 和其他格式。你可以看看下面的链接。

Google Charts @cloudformatter support page: http://www.cloudformatter.com/GoogleCharts

谷歌图表@cloudformatter 支持页面：http://www.cloudformatter.com/GoogleCharts

Documentation for the overall Javascript: http://www.cloudformatter.com/CSS2Pdf.APIDoc.Usage

整个 Javascript 的文档：http: //www.cloudformatter.com/CSS2Pdf.APIDoc.Usage

There are a few hints on the Google Charts web page above about implementing a Handler that adds the SVG namespace to the generated SVG after the chart draws.

上面的 Google Charts 网页上有一些关于实现 Handler 的提示，该 Handler 在图表绘制后将 SVG 命名空间添加到生成的 SVG 中。

You can choose from the menu at the top to format the whole page or even choose from the menus inline to format only a particular chart to PDF (or other formats).

您可以从顶部的菜单中进行选择以格式化整个页面，甚至可以从内联菜单中进行选择以仅将特定图表格式化为 PDF（或其他格式）。

There is also a fiddle to play with here: http://jsfiddle.net/zvx6eb7e/10/, the code to produce PDF behind the PDF button is only this:

这里还有一个小提琴可以玩：http: //jsfiddle.net/zvx6eb7e/10/，在PDF按钮后面生成PDF的代码只是这个：

var click="return xepOnline.Formatter.Format('JSFiddle', {render:'download', srctype:'svg'})";
jQuery('#buttons').append('<button onclick="'+ click +'">PDF</button>');

I would note one thing --- this is not chart to image to PDF, this is chart in vector to PDF for the highest resolution and best representation of the data.

我要注意一件事——这不是图表到 PDF 的图像，这是 PDF 的矢量图表，用于最高分辨率和最佳数据表示。

回答by Kamil Szymański

Didn't you mixed up your quotes? '<img src='"should be '<img src="'and "'>'should be '">'

你不是混淆了你的报价吗？'<img src='"应该'<img src="'并且"'>'应该是'">'

Also I think, that the question has been already answered: Save google chart as image

我也认为，这个问题已经得到解答：Save google chart as image

With an example here: http://jsfiddle.net/asgallant/R8A8P/

举个例子：http: //jsfiddle.net/asgallant/R8A8P/