在JavaScript中實現save.As（）對話框csv

我想寫一個代碼，將我的php數組轉換爲csv，然後打開一個下載對話框（save.As（）），以便網站用戶可以下載點擊一個html href鏈接後的文件。在JavaScript中實現save.As（）對話框csv

在搜索了很多帖子之後，我可能已經想出了一個JavaScript解決方案，它使我能夠將php數組轉換爲csv，並在網頁上顯示結果以檢查它是否正常運行。

我盡力讓下載對話框工作，但迄今爲止沒有成功。我正在嘗試FileSaver.js，但這只是不適合我。我更喜歡純粹的JavaScript解決方案，它可以在沒有附加庫的情況下適用於IE，Safari和Firefox。

這是我的腳本到目前爲止將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>

謝謝！

來源

2017-06-15 schustischuster

你試過Kanchu的答案在這裏：https://stackoverflow.com/questions/13405129/javascript-create-and-save-file？ – icecub

'我更喜歡純粹的JavaScript解決方案' - 好吧，FileSaver.js是一個純粹的javascript解決方案，爲了獲得與FileSaver.js相同級別的跨瀏覽器兼容性，您必須編寫FileSaver.js - 也許您可以解釋它是什麼關於FileSaver.js不工作「爲你」 –

@ icecub只是有一個快速的嘗試，它現在不適合我，但會更詳細地研究它。謝謝！ – schustischuster

感謝有用的評論，我可以得到這個運行，並將代碼更新到使用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>

感謝大家的幫助！

來源

2017-06-27 15:02:23 schustischuster

在JavaScript中實現save.As（）對話框csv

回答

相關問題