使用Highcharts中的插件CSV导出时如何自定义文件名？答案

【问题标题】：How I can customize the file name when exporting using the plug-in CSV in Highcharts?使用Highcharts中的插件CSV导出时如何自定义文件名？
【发布时间】：2013-11-25 06:38:13
【问题描述】：

我使用的插件是这样的： http://www.highcharts.com/plugin-registry/single/7/Export-CSV

我在标签“head”上的部分代码是这样的：

<script type="text/javascript">//<![CDATA[ 
var titulodelgrafico = "Soy el titulo del gráfico";    /* TODOS: reemplazar por el nombre de la pregunta  */
var titulodelarchivo = "Soy el titulo del archivo";    /* TODOS: reemplazar por el nombre del archivo     */
var nombredelaSerie =  "Soy el nombre de la serie";    /* TODOS:  reemplazar por el nombre de la serie    */
var titulodelejeY =    "Soy el titulo del eje Y";      /* BARRAS: reemplazar por el titulo del eje Y      */
var formatodeltooltip ="{series.name}: <b>{point.percentage:.1f}%</b>"; /* PASTEL Y SEMICIRCULO: reemplazar por la forma de llamar los tipos de datos */
$(function () {
/* ______________________ GRÁFICA DE PASTEL ______________________ */
    $('.pastel').highcharts({
        title: {text: titulodelgrafico}, tooltip: { pointFormat: formatodeltooltip },exporting: { filename: titulodelarchivo },legend: {width: 300, itemWidth: 150 },
        xAxis: {
        categories: ['Firefox', 'IE', 'Chrome', 'Safari', 'Opera', 'Others']
        },
        series: [{
            type: 'pie',
            name: nombredelaSerie,
            data: [
                ['Firefox',   45.0],
                ['IE',        26.8],
                {
                    name: 'Chrome',   
                    y: 12.8,
                    sliced: true,
                    selected: true  /* Este aparecera seleccionado por defecto */
                },
                ['Safari',     8.5],
                ['Opera',      6.2],
                ['Others',     0.7]
            ]
        }]
        });
});

我需要用自定义名称保存 CSV 文件以导出。
{filename: titulodelarchivo} /* just let me customize the "filename" with the following formats: PDF, PNG, JPEG and SVG. But not with the CSV. */

我看过以下代码： highcharts.com / studies / csv-export / csv.php

但我想用javascript做，可以吗？

【问题讨论】：

标签： javascript php jquery csv highcharts

【解决方案1】：

据我所知，在 javascript 插件中，URL 已编码到文件中。因此，发出 CSV 文件以供下载的 PHP 文件控制着 CSV 文件的详细信息。为了解决这个问题，您可以轻松地修改插件并更改 URL，然后托管您自己的 CSV 生成工具，该工具会以任何格式发出您希望的文件名。为此，您必须获取 javascript 插件的源代码和 PHP 文件的源代码。

Javascript 来源：https://github.com/highslide-software/export-csv/blob/master/export-csv.js

在此页面中，您可以从以下行更改 URL。（GIT 上的第 48 行）

Highcharts.post('http://www.highcharts.com/studies/csv-export/csv.php', {
                csv: this.getCSV()
            });

如您所见，该 URL 已编码为 csv.php。现在通读该文件，PHP 源代码也可用。而且很简单。

PHP源码：https://raw.github.com/highslide-software/highcharts.com/master/studies/csv-export/csv.php

现在在此文件中，您将在第 10 行看到文件名静态设置为 chart.csv。

header('Content-disposition: attachment;filename=chart.csv');

您可以简单地将 filename=chart.csv 更改为您想要的任何内容。

现在这样做意味着您必须托管一个 PHP 服务器（您可以用其他语言重写它）并且您必须使用您的 javascript 文件副本。

希望这会有所帮助。

【讨论】：

我认为没有别的办法。谢谢你的回答。

【解决方案2】：

我已经通过更新 export-csv.js 文件解决了这个问题

来源：https://github.com/highslide-software/export-csv/blob/master/export-csv.js

之前的代码行 152

`name = (chart.title ? chart.title.textStr.replace(/ /g, '-').toLowerCase() : 'chart');`

更新

`title = (chart.title ? chart.title.textStr.replace(/ /g, '-').toLowerCase() : 'chart');
 // for dynamic name 
 name = chart.options.exporting.filename ? chart.options.exporting.filename : title`

您可以更改导出文件名

`exporting: {
    enabled: true,
    filename: "test"
}`

并获得所需的名称

【讨论】：