Highcharts列高度在phantomjs生成pdf

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();
}
}

查看页面时，图表看起来是这样的:https://i.stack.imgur.com/N4tJn.png

这是它在pdf上的样子:https://i.stack.imgur.com/PLLTt.png

任何关于为什么会发生这种情况的见解将是感激的!

Answer 1

问题是，当页面加载时，PhantomJS立即拍摄快照。然而，Highcharts图表有一个动画来构建图表。

这意味着当PhantomJS拍摄快照时，图还没有完全构建好。有两种可能的解决方案。

1。跳过Highcharts动画

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

plotOptions: {
    series: {
        animation: false
    }
}

来源

2。在拍摄快照时添加延迟

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

源