javascript - 将 PhantomJs 与 PHP 循环结合使用

Question

我一直致力于集成 PhantomJS，以帮助在我的服务器上创建图像，然后可以在 HTML 模板中使用这些图像，并使用 mPDF 将其保存为 PDF。我正在使用 Yii2，并设法使用一些虚拟脚本生成并保存图像。但我不确定如何针对动态数据集体执行此操作。

目前我有一个非常粗略的实现:

shell.php

if(exec('C:\xampp\htdocs\phantomjs\bin\phantomjs C:\xampp\htdocs\    reporting\views\site\test.php')){
echo 'yes';
} else echo 'no';

我的test.php文件基本上是一个 JavaScript 文件，只是带有 php 扩展名。

test.php

var system = require('system');
var page = require('webpage').create();
var fs = require('fs');

// load JS libraries
if(page.injectJs('C:\\xampp\\htdocs\\phantomjs\\jquery.1.9.1.min.js')){
console.log('Jquery used');
}
if(page.injectJs('C:\\xampp\\htdocs\\phantomjs\\highcharts.js')){
console.log('highcharts used');
}
if(page.injectJs('C:\\xampp\\htdocs\\phantomjs\\highcharts-convert.js')){
console.log('highcharts-convert used');
}

var args = {
width: 600,
height: 500
};

var svg = page.evaluate(function(opt){
$('body').prepend('<div id="container"></div>');

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        width: opt.width,
        height: opt.height
    },
    exporting: {
        enabled: false
    },
    title: {
        text: 'Combination chart'
    },
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
    },
    yAxis: {
        title: {
            text: 'Y-values'
        }
    },
    labels: {
        items: [{
            html: 'Total fruit consumption',
            style: {
                left: '40px',
                top: '8px',
                color: 'black'
            }
        }]
    },
    plotOptions: {
        line: {
            dataLabels: {
                enabled: true
            },
            enableMouseTracking: false
        },
        series: {
            enableMouseTracking: false,
            shadow: false,
            animation: false
        }
    },
    series: [{
        type: 'column',
        name: 'Andrii',
        data: [3, 2, 1, 3, 4]
    }, {
        type: 'column',
        name: 'Fabian',
        data: [2, 3, 5, 7, 6]
    }, {
        type: 'column',
        name: 'Joan',
        data: [4, 3, 3, 9, 0]
    }, {
        type: 'spline',
        name: 'Average',
        data: [3, 2.67, 3, 6.33, 3.33],
        marker: {
            lineWidth: 2,
            lineColor: 'white'
        }
    }, {
        type: 'pie',
        name: 'Total consumption',
        data: [{
            name: 'Andrii',
            y: 13,
            color: '#4572A7'
        }, {
            name: 'Fabian',
            y: 23,
            color: '#AA4643'
        }, {
            name: 'Joan',
            y: 19,
            color: '#89A54E'
        }],
        center: [100, 80],
        size: 100,
        showInLegend: false,
        dataLabels: {
            enabled: false
        }
    }]
});

return chart.getSVG();
},  args);

// Saving SVG to a file
fs.write("test.svg", svg);
// Saving diagram as PDF
//setTimeout(function(){
page.render('test.png', {format: 'png', quality: '100'});

phantom.exit();

这会生成并保存 png文件(尽管尺寸未设置)。

但我逐渐意识到我无法在该文件中使用 PHP。 exec()电话永远不会返回，我最终只是取消了它。我假设这是因为 PhantomJS 在遇到 <?php 时不知道该怎么做标签。

尝试使用 PHP 循环数据库数据来生成和保存图表的最佳方法是什么？

Answer 1

I have been working on integrating PhantomJS to help create images on my server that can then be used in a HTML template and saved to a PDF using mPDF.

这听起来是一种过于复杂的完成任务的方式。你知道 PhantomJS 也可以生成 PDF 吗？

page.render('charts.pdf');

因此，我建议创建一个普通的 HTML 页面(从您的 YII2 应用程序)，其中包含所有必要的图表，然后只需使用 PhantomJS 将其渲染为 PDF。

<小时/>

但是，如果您想在 PhantomJS 脚本中使用 PHP 变量，当然有办法做到这一点。您的想法是正确的，您认为使用 PHP 可以动态生成脚本。但在将该脚本传递给 PhantomJS 之前，必须由 PHP 对其进行处理。

由于您已经使用了 MVC 框架，我建议这样做:为您的 js 脚本创建一个模板(本质上是一个 View /部分)，像 View 一样加载它，将图表数据传递给它，并创建一个有效的脚本，在需要的地方插入动态变量。像这样的事情:

在应用程序模型/ Controller 中相应地准备数据(伪代码，我还没有完成 Yii):

$series = array();
foreach ($data as $line)
{
    $series[] = array(
        "type" => 'column',
        "name" => $line['name'],
        "data" => $line['data']
    );
}
$this->view->params['series'] = $series;

然后将其传递给查看和使用，如下所示:

var chart = new Highcharts.Chart({
   ...
   series: <?php echo json_encode($this->params['series']); ?>
   ...
});

然后，不要将输出发送到浏览器，而是捕获它并保存到临时文件，然后将其文件名作为参数传递给 PhantomJS。