使用wkhtmltopdf将Google图表输出为PDF

Question

We have a Silverstripe project that uses the silverstripe-wkhtmltopdf module to output HTML/CSS/Javascript as PDF. 我们有一个Silverstripe项目，该项目使用silverstripe-wkhtmltopdf模块将HTML / CSS / Javascript输出为PDF。

Simple Javascript like document.write works but I want to output Google Charts using their visualisation API: 像document.write这样的简单Javascript可以工作，但是我想使用其可视化API输出Google Charts：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
  google.load('visualization', '1', {packages: ['corechart', 'bar']});
</script>

The PDF wasn't showing any of the visualisation output so I used QTBrowser to debug the Javascript - as suggested here: Debugging javascript in wkhtmltopdf PDF没有显示任何可视化输出，因此我使用QTBrowser调试Javascript-如此处建议：在wkhtmltopdf中调试javascript

The error I'm getting in QTBrowser is: Error: one or more fonts could not be loaded. 我在QTBrowser中遇到的Error: one or more fonts could not be loaded.是： Error: one or more fonts could not be loaded. from https://www.google.com/uds/api/visualization/1.0/b5ac9efed10eef460d14e653d05f5fbf/webfontloader,dygraph,format+en,default+en,ui+en,bar+en,corechart+en.I.js:737 从https://www.google.com/uds/api/visualization/1.0/b5ac9efed10eef460d14e653d05f5fbf/webfontloader,dygraph,format+en,default+en,ui+en,bar+en,corechart+en.I.js:737

The HTML looks correct at my end but I don't know the compatibility of QTBrowser, or how it relates to wkhtmltopdf. HTML在我看来似乎是正确的，但是我不知道QTBrowser的兼容性，或者它与wkhtmltopdf的关系。

Has anyone had any experience/ success with using wkhtmltopdf to output Google Charts? 有没有人使用wkhtmltopdf输出Google图表有任何经验/成功？

Answer 1

Here's a good post which explains this topic and shows you how to achieve it 这是一篇很好的文章，解释了此主题并向您展示了如何实现

http://codingexplained.com/coding/php/using-google-visualization-with-wkhtmltopdf http://codingexplained.com/coding/php/using-google-visualization-with-wkhtmltopdf

    <script type="text/javascript">
        function init() {
            google.load("visualization", "1.1", { packages:["corechart"], callback: 'drawCharts' });
        }

        function drawCharts() {
            drawAccountImpressions('chart-account-impressions');
        }

        function drawAccountImpressions(containerId) {
            var data = google.visualization.arrayToDataTable([
                ['Day', 'This month', 'Last month'],
                ['01', 1000, 400],
                ['05', 800, 700],
                ['09', 1000, 700],
                ['13', 1000, 400],
                ['17', 660, 550],
                ['21', 660, 500],
                ['23', 750, 700],
                ['27', 800, 900]
            ]);

            var options = {
                width: 700,
                height: 400,
                hAxis: { title: 'Day',  titleTextStyle: { color: '#333' } },
                vAxis: { minValue: 0 },
                curveType: 'function',
                chartArea: {
                    top: 30,
                    left: 50,
                    height: '70%',
                    width: '100%'
                },
                legend: 'bottom'
            };

            var chart = new google.visualization.LineChart(document.getElementById(containerId));
            chart.draw(data, options);
        }
    </script>
</head>

<body onload="init()">
    <div id="chart-account-impressions"></div>
</body>

使用wkhtmltopdf将Google图表输出为PDF

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-10-12 05:38:05

使用wkhtmltopdf将Google图表输出为PDF

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-10-12 05:38:05

解决方案1
2 已采纳 2016-10-12 05:38:05