Question

我正在尝试从使用highcharts的页面生成带有phantomjs的pdf。这是我正在使用的脚本

var port, server, service

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

page.onError = function (msg, trace) {
console.log(msg);
trace.forEach(function(item) {
    console.log('  ', item.file, ':', item.line);
})
}

var fs = require('fs');
function loadFile(name){
if(fs.exists(name)){
    console.log(name+ " File  exist");
    return fs.open(name,"r");
}else {
    console.log("File do not exist");
}
}

if (system.args.length !== 2) {
console.log('Usage: serverkeepalive.js <portnumber>');
phantom.exit(1);
} else {
port = system.args[1];
console.log('port: ' + port);
server = require('webserver').create();

service = server.listen(port, { keepAlive: true }, function (request, response) {
    console.log('Request at ' + new Date());
    console.log(JSON.stringify(request, null, 4));
    console.log('ProjectId:' + request.headers.projectId)
    var projectReportPage = 'http://localhost:55073/' + request.headers.projectId;

    console.log(projectReportPage);
    console.log(JSON.stringify(request.cookies, null, 4));

    phantom.cookiesEnabled = true;
    phantom.addCookie({
        'name':     'hello',   /* required property */
        'value':    'helloFromPhantomJS',  /* required property */
        'domain':   'localhost',           /* required property */
        'expires':  (new Date()).getTime() + 3600   /* <- expires in 1 hour */
    });
    console.log(JSON.stringify(phantom.cookies, null, 4));

    page.paperSize = {
    format: 'A4',
    orientation: 'portrait',
    margin:'1cm' };

    page.open(projectReportPage, function (status) {
        if (status !== 'success') {
            console.log('FAIL to load the address');
        } else {
            console.log('Page obtained');
            var reportName = 'report_' + request.headers.projectId + '.pdf';
            page.evaluate( function(){$('h1').css('color', 'red');});
            page.render(reportName);
            var body = fs.absolute(reportName);
            //var body = page.renderBase64('pdf');
            // var fi = loadFile(reportName);
            // var body = fi.read();
            // var rawBody = fs.read(reportName);
            // console.log(rawBody);
            // var body = base64Encode(rawBody);
            console.log(body);
            response.statusCode = 200;
            response.headers = {
                'Cache': 'no-cache',
                'Content-Type': 'application/pdf',
                'Connection': 'Keep-Alive',
                'Content-Length': body.length
            };
            response.write(body);
            response.close();
        }
    });
    console.log('After page open handler');
});

if (service) {
    console.log('Web server running on port ' + port);
} else {
    console.log('Error: Could not create web server listening on port ' + port);
    phantom.exit();
}
}

查看页面时，图表如下所示： http://i.imgur.com/kVImodv.png

这就是pdf上的样子： http://i.imgur.com/vGon6vb.png

对于为什么会发生这种情况的任何见解都将不胜感激！

Answer 1

问题是PhantomJS会在加载页面时立即拍摄快照。但是，Highcharts图表有一个动画，可以构建图形。

这意味着当PhantomJS拍摄快照时，图形不会完全建立。有两种可能的解决方案。

1。跳过Highcharts动画

将其添加到图形配置对象中。

plotOptions: {
    series: {
        animation: false
    }
}

Source

2。拍摄快照时添加延迟

page.open(address, function (status) {
   window.setTimeout(function () {
            page.render(output);
            phantom.exit();
        }, 200);
}

Source

在phantomjs中的Highcharts列高度生成pdf

1 个答案:

1。跳过Highcharts动画

2。拍摄快照时添加延迟