与PHP循环一起使用PhantomJs

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文件基本上是用PHP扩展的JavaScript文件。

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

我一直在努力整合PhantomJS来帮助在我的服务器上创建图像，然后可以在HTML模板中使用图像并使用mPDF保存为PDF。

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

page.render('charts.pdf'); 

所以我建议创建一个普通的HTML页面（从YII2应用程序），上面有所有必要的图表，然后简单地将其与PhantomJS渲染成PDF。

---

不过，如果你想反正你PhantomJS脚本中使用变量从PHP，有当然的方式来做到这一点。你在正确的轨道上，认为用PHP可以动态地生成脚本。但在将该脚本传递给PhantomJS之前，必须由PHP处理。因为你已经使用了一个MVC框架，所以我建议这样做：为你的js脚本创建一个模板（本质上是一个视图/部分），像视图一样加载它，将图表的数据传递给它并创建一个有效的脚本，在他们需要的任何地方插入动态变量。事情是这样的：

在应用模型/控制器相应的准备你的数据（伪代码，我没有做过的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。