在JavaScript中为csv实现save.As（）对话框

Question

我正在尝试编写将php数组转换为csv的代码，然后打开一个下载对话框（save.As（）），以便网站用户可以在单击html href链接后下载文件。

在搜索了很多帖子之后，我已经可以使用JavaScript解决方案，使我能够将php数组转换为csv并将结果显示在网页上，以检查其是否正常运行。

我也尽力使下载对话框正常工作，但到目前为止没有成功。 我正在尝试FileSaver.js，但是这个对我来说不起作用。 我希望使用无需其他库即可用于IE，Safari和Firefox的纯JavaScript解决方案。

到目前为止，这是我的脚本，用于将json对象转换为csv并在屏幕上显示结果（这主要基于SO上找到的另一个脚本，但是我无法再次找到源代码-如果有人知道，我很乐意包含一个链接这里）：

<script type="text/javascript">
    function ConvertToCSV(objArray) {
    var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
    var str = '';
        for (var i = 0; i < array.length; i++) {
            var line = '';
            for (var index in array[i]) {
                if (line != '') line += ','
                line += array[i][index];
            }
            str += line + '\r\n';
        }
        return str;
    }
    function download_csv_function() {
    // Read in JSON data and transform to CSV
    $(document).ready(function () {          
        // Read in json data
        var items = <?php echo $jsonout; ?>;
        // Convert JSON object into JSON string
        var jsonObject = JSON.stringify(items);
        // Convert JSON to CSV
        var csvstring = ConvertToCSV(jsonObject);
        $('#csv').text(csvstring);
     })
    };
</script> 

在html中包含一个链接：

</form>
  <!-- Define "Download .csv link here" -->
  <a href="javascript:void(0)" onclick="download_csv_function();" >Get data as csv file</a>
</form>  
<body>
<pre id="csv"></pre>
</body>      

谢谢！

Answer 1

感谢有用的评论，我可以运行它并将代码更新为使用FileSaver.js的最终版本。 以下语法“ saveTextAs（data，filename）”解决了该问题。 它适用于Firefox和Safari（IE，我尚未检查）。 除了FileSaver.js，还需要加载jQuery以使href链接正常运行。

首先加载js库：

</script>
<!-- Load jQuery and FileSaver.js here -->
<script src="/path-to-jquery.js"></script>
<script src="/path-to-FileSaver.js"></script>
<script>

将json对象转换为csv并打开下载对话框的脚本（这主要是基于SO处找到的另一个脚本，但是我无法再次找到源代码-如果有人知道，我很乐意在此处添加链接）：

<script type="text/javascript">
    function ConvertToCSV(objArray) {
    var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
    var str = '';
        for (var i = 0; i < array.length; i++) {
            var line = '';
            for (var index in array[i]) {
                if (line != '') line += ','
                line += array[i][index];
            }
            str += line + '\r\n';
        }
        return str;
    }
    function download_csv_function() {
    // Read in JSON data and transform to CSV
    $(document).ready(function () {          
        // Read in json data
        var items = <?php echo $jsonout; ?>;
        // Convert JSON object into JSON string
        var jsonObject = JSON.stringify(items);
        // Convert JSON to CSV
        var csvstring = ConvertToCSV(jsonObject);
    // FileSaver.js: open download dialog and save file as csv
    saveTextAs(csvstring, "data.csv");
     })
    };
</script> 

在html中包含一个链接：

</form>
  <!-- Define "Download .csv link here" -->
  <a href="javascript:void(0)" onclick="download_csv_function();" >Get data as csv file</a>
</form>        

谢谢大家的帮助！