我正在尝试生成一个PDF文件，其中包括Highcharts作为PDF的一部分。比如html表格后面跟着图形，更多的表格等等。我正在使用PhantomJS(并有Highcharts-Convert.js)。当我用PhantomJS栅格化.js文件创建PDF时，我得到了PDF，但Highcharts出现了错误(例如，列条不会上升到正确的数字-例如，如果值是200，条将上升到50)。
我认为带有highcharts-convert.js的Phantomjs只是每个图表(就像你从图表中保存为PDF一样)。如何对包含HTML和Highcharts的整个页面进行排序?
换句话说，希望"导出整个页面"为PDF(最好通过命令行)。
一直在疯狂地尝试解决，感谢这里的帮助。
我插入了下面的代码。这是一个在服务器端生成的完整HTML页面的示例，我希望将其自动转换为PDF。对不起，我是新手，所以希望我做得对。
<HTML>
<HEAD>
<TITLE>My Title</TITLE>
<SCRIPT src="include/jquery-1.9.1.js"></SCRIPT>
<SCRIPT src="include/jquery-ui.js"></SCRIPT>
<SCRIPT src="include/highcharts.js"></SCRIPT>
<SCRIPT src="include/exporting.js"></SCRIPT>
<SCRIPT src="include/highcharts-more.js"></SCRIPT>
<SCRIPT>
$(function () {
$('#DailyAllDoors').highcharts({
chart: {
type: 'column',
width:width,
borderColor: '#000000',
borderWidth: 2
},
credits: {
enabled: false
},
exporting: { enabled: true },
title: {
text: 'Daily Report '
},
subtitle: {
text: '01 July 2015 to : 31 July 2015 (31 Days)'
},
xAxis: {
categories: [
'Wed 1 July 2015','Thu 2 July 2015','Fri 3 July 2015','Sat 4 July 2015','Sun 5 July 2015','Mon 6 July 2015','Tue 7 July 2015','Wed 8 July 2015','Thu 9 July 2015','Fri 10 July 2015','Sat 11 July 2015','Sun 12 July 2015','Mon 13 July 2015','Tue 14 July 2015','Wed 15 July 2015','Thu 16 July 2015','Fri 17 July 2015','Sat 18 July 2015','Sun 19 July 2015','Mon 20 July 2015','Tue 21 July 2015','Wed 22 July 2015','Thu 23 July 2015','Fri 24 July 2015','Sat 25 July 2015','Sun 26 July 2015','Mon 27 July 2015','Tue 28 July 2015','Wed 29 July 2015','Thu 30 July 2015','Fri 31 July 2015',
],
labels: {
rotation: -45,
align: 'right',
step:1,
}
},
yAxis: [{
min: 0,
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value,0);
},
style: {
color: 'black'
}
},
title: {
text: ' Visitors',
style: {
color: 'black'
}
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
},
formatter: function () {
return Highcharts.numberFormat(this.total,0);
}
}
}
],
tooltip: {
headerFormat: '<strong><span style="font-size:12px">{point.key}</span></strong><table width="250">',
pointFormat: '<tr><td style="color:{series.color};padding:0"><font size="2px">{series.name}: </font></td>' +
'<td style="padding:0"><font style="color:{series.color}" size="2px"><b>{point.y}</b></font></td></tr>',
footerFormat: '<tr><td padding:0"><font size="1px"><em>(Disclaimer: Averages indicated for the period selected)</em></font></td></tr></table>',
shared: true,
useHTML: true
},
plotOptions: {
line: {
marker: {
enabled: false
}
},
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: 'white',
},
formatter: function () {
return Highcharts.numberFormat(this.y,0);
}
}
}
},
series: [
{
id: 'Total ',
name: 'Total',
data: [
4593,4667,6852,{y:9792, color: 'grey'},{y:7603, color: 'grey'},3455,3312,3380,3526,5333,{y:7891, color: 'grey'},{y:6293, color: 'grey'},2685,3144,3319,3696,5603,{y:7328, color: 'grey'},{y:5352, color: 'grey'},2299,2224,2563,2576,5226,{y:9534, color: 'grey'},{y:7373, color: 'grey'},2763,2899,3123,3468,6481
]
},
{
id: ' Average',
name: ' Average',
yAxis: 0,
type: 'line',
color: '#00806b',
data: [
4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,
],
dataLabels: {
enabled: false,
color: 'red',
formatter: function () {
return Highcharts.numberFormat(this.y,0);
}
}
}
,{
name: 'Event Days',
yAxis: 0,
type: 'line',
color: '#ed0181',
data: [],
}
,{
type: 'scatter',
name: ' ',
tooltip: {
enabled: false
},
dataLabels: {
format: '{key} Average',
enabled: true,
color: '#00806b',
fontWeight: 'bold',
y: 0,
},
data: [
{ x: 1, y: 4785, name: '4 785'}
],
marker: {
enabled: false,
}
}
]
});
});
</SCRIPT>
</HEAD>
<BODY>
<TABLE bgcolor="#00b9f1" border="0" width="100%" align="center">
<TR>
<TD height="30" align="left"><STRONG><FONT color="white">TOTALS</FONT></STRONG>
</TD>
</TR>
</TABLE>
<DIV id="DailyAllDoors" width="300"></DIV>
<BR><BR>
<TABLE border="1" width="70%">
<TR>
<TD bgcolor="#000080"><FONT color="#FFFFFF">Date</FONT>
</TD>
<TD bgcolor="#000080"><FONT color="#FFFFFF">Days</FONT>
</TD>
<TD bgcolor="#000080"><FONT color="#FFFFFF"> Visitors</FONT>
</TD>
<TD bgcolor="#000080"><FONT color="#FFFFFF">Event Day</FONT>
</TD>
<TD bgcolor="#000080"><FONT color="#FFFFFF">Event Day Description</FONT>
</TD>
</TR>
<TR>
<TD> 01 July 2015
</TD>
<TD> Wed
</TD>
<TD> 4593
</TD>
<TD>
</TD>
<TD>
</TD>
</TR>
<TR>
<TD> 01 July 2015
</TD>
<TD> Wed
</TD>
<TD> 4593
</TD>
<TD>
</TD>
<TD>
</TD>
</TR>
<TR>
<TD> 01 July 2015
</TD>
<TD> Wed
</TD>
<TD> 4593
</TD>
<TD>
</TD>
<TD>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
最后我运行PhantomJS作为:
phantomjs——web-security=false rasterize.js "http://localhost:151/Reports.asp" reports.pdf
上面的工作，但创建一个PDF与Highcharts列栏不上升到正确的点(如果值为1000，它爬升到50)。
HighCharts将折线图的动画设置为false
这就是问题的答案。花了几个小时才找到，所以我没有删除我的问题，而是链接了答案。谢谢你