使用phantomjs无法正确显示角度数据

时间:2015-03-20 06:09:21

标签: javascript php angularjs phantomjs yii2

是角度js&的新手phantomjs,我正在网站上工作角...我需要创建该页面的下载,所以我正在使用phantomjs ...

点击下载按钮,正在调用js功能

var downUrl = "index.php?r=route/download";
$.ajax({
        method:'POST',
        data: {id: <?php echo Yii::$app->request->get('id'); ?> ,             url:"<?php echo $_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; ?>"},
        url: downUrl,
}).done(function(data) {
var response=$(data);
var phantomPath = response.filter('#phanton_temp_file').val();
console.log(phantomPath);
if(phantomPath){
    window.top.location.href = phantomPath;
 }
});   
控制器功能

$fileName   = strtotime(date('Y-m-d H:i:s'));  
$pdfUrl = \Yii::$app->request->BaseUrl."/phantomjs/create.php?filename=".$fileName.".png&url=http://example.com/frontend/web/index.php?r=route/detail&id=427";    
echo "<input type='hidden' value='".$pdfUrl."' name='phanton_temp_file' id='phanton_temp_file' />";

创建php页面

 <?php
 $name = time()."-".$_REQUEST['filename'];
 $tempFile = "../../temp/".$name;
 sleep(60);
 $result = shell_exec('phantomjs rasterize.js '.$_REQUEST['url'].' '.$tempFile);
header("Content-Type: application/octet-stream");
header('Content-disposition: attachment; filename='.$name);
header('Content-type: application/png');
readfile($tempFile);
?>

js文件

 var page = require('webpage').create(),
 system = require('system'),
  address, output, size;
 if (system.args.length < 3 || system.args.length > 5) {
  console.log('Usage: rasterize.js URL                             filename[paperwidth*paperheight|paperformat] [zoom]');
  console.log('  paper (pdf output) examples: "5in*7.5in", "10cm*20cm", "A4", "Letter"');
   phantom.exit(1);
 } else {
 address = system.args[1];
 output = system.args[2];
 page.viewportSize = {width: 1380, height: 1024};
 if (system.args.length > 3 && system.args[2].substr(-4) === ".png") {
    size = system.args[3].split('*');
    page.paperSize = size.length === 2 ? { width: size[0], height: size[1], margin: '0px' }
    : { format: system.args[3], orientation: 'portrait', margin: '1cm' };
    }
    if (system.args.length > 4) {
      page.zoomFactor = system.args[4];
    }
    page.open(address, function (status) {
    if (status !== 'success') {
        console.log('Unable to load the address!');
        phantom.exit();
    } else {
        window.setTimeout(function () {
            console.log(output);
            page.render(output);
            phantom.exit();
        }, 2000);
      }
     });
     }

我正在获得如下截图,角度数据无法渲染...我也尝试了延时...但仍然提供相同的截图...请帮助我...提前感谢

// -------------------------------------------

在我的角度控制器中,我也使用下面的代码

$scope.$on('$viewContentLoaded', function() {
   $scope.htmlReady();
 });

enter image description here

2 个答案:

答案 0 :(得分:0)

我有同样的问题

我曾使用过CDN,而是使用可供下载的angularjs库

并在您的信息页中加入

快乐编码

答案 1 :(得分:0)

PhantomJS 2.2.1 不支持某些 angular.js 定义。前任。常量 因此你不能渲染 angular.js。

您可以使用旧的 angular.js 版本。

我尝试了不稳定的 PhantomJS 2.5 版本。它正在渲染,但不稳定,您可能会收到另一个错误。