我需要将一个Javascript图表（HighCharts）导出为Excel文件；该图表渲染在一个div中，但Excel不能渲染javascript生成的html+css内容，只能呈现没有样式的文本。
解决方案是将渲染图表的位置转换成图像（jpeg），但我一直没有成功......
谢谢！
5个回答
2
HighCharts已经通过Exporting模块支持图像导出功能。Exporting获取它后，您应该能够修改脚本以任何需要的方式保存图像。这绝对不是初学者的任务，需要大量的调试。
如果是我，我会修改响应导出按钮的代码，这样我就可以使用JavaScript来激活它，并传递信息，以便后端的PHP文件可以按您想要的方式保存图片，而不是将其返回给客户端。
如果是我，我会修改响应导出按钮的代码，这样我就可以使用JavaScript来激活它，并传递信息，以便后端的PHP文件可以按您想要的方式保存图片，而不是将其返回给客户端。
- Gunnar Hoffman
2
我尝试修改Highcharts导出文件以查看Highcharts生成用于下载的图像链接，但我没有成功。 - Rafael Ranzolin
@RafaelRanzolin。嗨 Rafael，我需要做和你一样的事情。你有找到解决方法吗？请分享一下。谢谢。 - ivantxo
1
如果您愿意尝试一个插件，有一种方法可以在Excel中使用Javascript、HTML和CSS。它叫做Funfun，并且提供了一个在线编辑器和一个嵌入式电子表格，因此在网站和Excel之间的过渡并不困难。
这是我用Highcharts制作的一个图表：
这就是我如何通过json文件从电子表格中获取我的数据：
我知道这是一篇旧文章，但我希望它能帮助到有同样问题的人。
披露：我是Funfun的开发者。
这是我用Highcharts制作的一个图表：
https://www.funfun.io/1/#/edit/5a61c190404f66229bda3f0f
在这个例子中，我使用了Highchart demo中的图表，并用我的数据替换了它。 我将我的数据存储在嵌入式电子表格中，而由于一个json文件，我可以在我的javascript代码中使用它。这就是我如何通过json文件从电子表格中获取我的数据：
{
"data": "=A1:E16"
}
我会将它以正确的格式存储在我的script.js文件中，这样我就可以直接在Highcharts中加载它（对于数字，您必须将数据转换为浮点数或整数）：
var data = [];
for (var i = 1; i < $internal.data.length; i++)
data.push(
{
x: parseFloat($internal.data[i][2]),
y: parseFloat($internal.data[i][3]),
z: parseFloat($internal.data[i][4]),
name: $internal.data[i][1],
country: $internal.data[i][0]
}
);
选择完图表的所有选项后，您可以添加数据：
series: [{
data: data
}]
如果您对图表满意，可以通过在Funfun add-in中粘贴URL将其直接加载到Excel中。以下是我的示例：
我知道这是一篇旧文章，但我希望它能帮助到有同样问题的人。
披露：我是Funfun的开发者。
- nicolas dejean
1
这可能有点晚了，但我通过谷歌偶然发现了这个问题，希望能对某些人有所帮助。
Highchart的图像是SVG格式：http://en.wikipedia.org/wiki/Svg，你需要将其转换为位图格式的图像。
您必须将Highcharts导出选项URL更改为自己的URL：
在您的导出脚本中，您必须将SVG图像转换为位图图像（我使用PHP和imagick），然后导出到适合您需求的格式，将位图图像保存到服务器，通过电子邮件发送等。
exporting : {
url: 'http://mydomain.com/export.php'
}
在您的导出脚本中，您必须将SVG图像转换为位图图像（我使用PHP和imagick），然后导出到适合您需求的格式，将位图图像保存到服务器，通过电子邮件发送等。
- The Coder
0
我知道已经有点晚了，但我遇到了同样的问题，而jsfiddle 帮助我从 Highchart 创建 Excel。 添加到导出菜单中的下载 CSV选项正常工作。 下面是代码：
/**
* A small plugin for getting the CSV of a categorized chart
*/
(function (Highcharts) {
// Options
var itemDelimiter = ',', // use ';' for direct import to Excel
lineDelimiter = '\n';
var each = Highcharts.each;
Highcharts.Chart.prototype.getCSV = function () {
var xAxis = this.xAxis[0],
columns = [],
line,
csv = "",
row,
col;
if (xAxis.categories) {
columns.push(xAxis.categories);
columns[0].unshift("");
}
each (this.series, function (series) {
columns.push(series.yData);
columns[columns.length - 1].unshift(series.name);
});
// Transform the columns to CSV
for (row = 0; row < columns[0].length; row++) {
line = [];
for (col = 0; col < columns.length; col++) {
line.push(columns[col][row]);
}
csv += line.join(itemDelimiter) + lineDelimiter;
}
return csv;
};
}(Highcharts));
// Now we want to add "Download CSV" to the exporting menu. We post the CSV
// to a simple PHP script that returns it with a content-type header as a
// downloadable file.
// The source code for the PHP script can be viewed at
// https://raw.github.com/highslide-software/highcharts.com/master/studies/csv-export/csv.php
Highcharts.getOptions().exporting.buttons.contextButton.menuItems.push({
text: 'Download CSV',
onclick: function () {
Highcharts.post('http://www.highcharts.com/studies/csv-export/csv.php', {
csv: this.getCSV()
});
}
});
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
$('#getcsv').click(function () {
alert(chart.getCSV());
});
- osyan
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接