AlaSQL JSON 到 XLSX 不工作

Question

我正在尝试将 JSON 数据转换为 CSV 和 XLSX，并且有 2 个按钮可以让我下载 CSV 和 XLSX 表格。 CSV 按钮有效，但 XLSX 按钮无效。

我试过很多东西，例如：

var filename = "RawData.xlsx" alasql('SELECT * INTO XLSX("' + filename + '",{headers:true}) FROM ?', [$scope.data]);

var filename = "RawData.xls" alasql('SELECT * INTO XLS("' + filename + '",{headers:true}) FROM ?', [$scope.data]);

var filename = "RawData.xlsx" alasql('SELECT * INTO XLSXML("' + filename + '",{headers:true}) FROM ?', [$scope.data]);

当我点击按钮时，第一个只是没有输出任何东西。

第二个输出一个 .xls 文件，但当我打开它时，它只是一团糟并且没有给出正确的结果。

第三个输出一个 .xlsx 文件，但是当我尝试打开它时失败并显示 "The file format is invalid".

有人知道如何解决这个问题吗？

我的代码在这里：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>


 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
        <!--alasql library-->
        <script src="https://cdn.jsdelivr.net/alasql/0.3/alasql.min.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

<script>

angular.module('app', []).controller('downloader', function($scope) {
                // json data to be exported
                
           $scope.data = [{"category":1,"guestValue":0,"visits":23},{"category":2,"guestValue":96.6,"visits":45},{"category":3,"guestValue":73.2,"visits":65},{"category":4,"guestValue":60.3,"visits":85},{"category":5,"guestValue":52.5,"visits":105},{"category":6,"guestValue":46.6,"visits":125},{"category":7,"guestValue":41.4,"visits":144},{"category":8,"guestValue":37.5,"visits":163},{"category":9,"guestValue":34.4,"visits":179},{"category":10,"guestValue":31.9,"visits":199},{"category":"11-17","guestValue":25.4,"visits":258},{"category":"18-28","guestValue":17,"visits":394},{"category":"29+","guestValue":9.7,"visits":847}];
                
                
               
                
                $scope.downloadReports = function() {   // we can download our json data in many formats. ex: csv, excel
                   // var filename = "someFileName.xlsx"
                    var filename = "RawData.csv"
                    //alasql('SELECT id as ID,name as Name INTO XLSX("' + filename + '",{headers:true}) FROM ?', [$scope.OrganizationUsersList]);
                    alasql('SELECT * INTO CSV("' + filename + '",{headers:true}) FROM ?', [$scope.data]);
                };
                
                
                $scope.downloadReports_xlsx = function() {
                
                
                  var filename = "RawData.xls"
                   // alasql('SELECT * INTO XLSML("RawData.xls",?) FROM ?',[$scope.data]);
                    alasql('SELECT * INTO XLSML("' + filename + '",{headers:true}) FROM ?', [$scope.data]);
                
                  
                
                };
                
            });

</script>

 </head>

<body ng-app="app" ng-controller="downloader">

 <div style="float: left">
 
 <button class="btn  btn-xs btn-white" ng-click="downloadReports()">Download CSV Report</button>
 <button class="btn  btn-xs btn-white" ng-click="downloadReports_xlsx()">Download Excel Report</button>
 
 <p id="heading">CSV to JSON Converter</p>
    <p class="small"><a href="http://jsfiddle.net/sturtevant/vUnF9/" target="_blank">JSON to CSV Converter</a>
    <hr />
    <p>Paste Your CSV Here:</p>
    <textarea id="csv" class="text">"Id","UserName"
"1","Sam Smith"
"2","Fred Frankly"
"1","Zachary Zupers"</textarea>
    <br />
    <button id="convert">Convert to JSON</button>
    &nbsp;&nbsp;
    <button id="download">Download JSON</button>
    <textarea id="json" class="text"></textarea>
    <p>Based on code posted <a href="http://www.bennadel.com/blog/1504-Ask-Ben-Parsing-CSV-Strings-With-Javascript-Exec-Regular-Expression-Command.htm" target="_blank">here on Ben Nadel's blog</a></p>
 
</div>
</body>


<body ng-app="app" ng-controller="downloader">

 <div style="float: left">

    <p id="heading">JSON to CSV Converter</p>
    <p class="small"><a href="http://jsfiddle.net/sturtevant/AZFvQ/" target="_blank">CSV to JSON Converter</a>
    <hr />
    <p>Paste Your JSON Here:</p>
    <textarea id="json" class="text">[{"Id":1,"UserName":"Sam Smith"},
{"Id":2,"UserName":"Fred Frankly"},
{"Id":1,"UserName":"Zachary Zupers"}]</textarea>
    <br />
    <input id="quote" type="checkbox" checked="true" /> Wrap values in double quotes
    <br />
    <input id="labels" type="checkbox" checked="true" /> Include labels in first row
    <br />
    <button id="convert">Convert to CSV</button>
    &nbsp;&nbsp;
    <button id="download">Download CSV</button>
    <textarea id="csv" class="text"></textarea>
    <p>Based on code posted <a href="" target="_blank">here on Whosebug</a></p>

</div>
</body>

</html>

Answer 1

您需要参考 xlsx.js 和 jszip.js 来生成 xlsx 文件。下面是 jsfiddle link。我已经使用你的数据生成了 xlsx 文件

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.2/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.2/xlsx.js"></script>

jsfiddle : https://jsfiddle.net/g0dz6spc/14/

如果有帮助请告诉我

AlaSQL JSON 到 XLSX 不工作

AlaSQL JSON to XLSX not working

html

javascript

jquery

angularjs

alasql