jquery導出csv Safari在Mac問題Mime類型和IE9導出問題

Question

我將我的HTML表格導出到csv，在Chrome和Firefox中正常工作，並且在Windows上的Safari瀏覽器中工作正常 - 您可以選擇打開或保存文件雖然名稱爲Unknown，但是如果你這樣做並打開下載文件就會在那裏並正確打開。

但是，在Mac上的Safari上，它會嘗試在另一個瀏覽器窗口中打開它並失敗。

有幾個選項，我期待到：

1. 創建一個單獨的按鈕導出CSV Safari瀏覽器的Mac
2. 使瀏覽器中打開「打開/另存爲」對話框。
3. 其他建議最好的辦法做到這一點..？

我已經看了一下，我認爲第二點的答案是否定的 - 你不能強制瀏覽器的行爲。

但是我還沒有找到一種方法來導出safari mac或一個很好的解決方案如何做到這一點。

我使用導出CSV jQuery代碼如下：

<script type="text/javascript"> 
     $(document).ready(function() { 

      function exportTableToCSV($table, filename) { 

       var $rows = $table.find('tr:has(td)'), 

        // Temporary delimiter characters unlikely to be typed by keyboard 
        // This is to avoid accidentally splitting the actual contents 
        tmpColDelim = String.fromCharCode(11), // vertical tab character 
        tmpRowDelim = String.fromCharCode(0), // null character 

        // actual delimiter characters for CSV format 
        colDelim = '","', 
        rowDelim = '"\r\n"', 

        // Grab text from table into CSV formatted string 
        csv = '"' + $rows.map(function (i, row) { 
         var $row = $(row),        
          $cols = $row.find('td'); 

         return $cols.map(function (j, col) { 
          var $col = $(col), 
           text = $col.text(); 

          return text.replace('"', '""'); // escape double quotes 

         }).get().join(tmpColDelim); 

        }).get().join(tmpRowDelim) 
         .split(tmpRowDelim).join(rowDelim) 
         .split(tmpColDelim).join(colDelim) + '"', 

        // Data URI 
        csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv); 

       $(this) 
        .attr({ 
         'download': filename, 
         'href': csvData, 
         'target': '_blank' 
        }); 
      } 

      // This must be a hyperlink 
      $(".export").on('click', function (event) { 
       // CSV 
       exportTableToCSV.apply(this, [$('#tableContainer>table'), 'export.csv']); 

       // IF CSV, don't do event.preventDefault() or return false 
       // We actually need this to be a typical hyperlink 

      }); 
     }); 
    </script> 

我的HTML表是從阿賈克斯在這裏創建是一個例子：

$.ajax({ 
     type: "POST", 
     //contentType: "application/json; charset=utf-8", 
     url: theUrl, 
     data: { 'manufacturer': manufacturer, 'country': country, 'startDate': startDate, 'endDate': endDate, 'chartType': chartType }, 
     dataType: "json", 
     success: function (data) { 
      setTimeout($.unblockUI, 50); 

      if (data.length == 0) { 
       $('#noData').show(); 
       $('#chartContainer').hide(); 
       $('#tableContainer').hide(); 
       $('#exportData').hide(); 
      } 
      var retailerNameArray = []; 
      var impressionsArray = []; 
      var intsArray = []; 
      for (var i = 0; i < data.length; i++) { 
       var impRow = data[i]; 


       //only display on graph if not 0 
       if (impRow.RetailerImpressionCount > 0) { 
        //put into an array 
        var retailer = impRow.RetailerDescription; 
        var imps = impRow.RetailerImpressionCount; 
        retailerNameArray.push(retailer); 
        impressionsArray.push(imps); 
        var clicks = impRow.RetailerClickCount; 
        intsArray.push(clicks); 

        $('#noData').hide(); 
        $('#chartContainer').show(); 
        $('#tableContainer').show(); 
        $('#exportData').show(); 

       } 
      } 

var table = document.getElementById("usertable"); 
      var tabledata = ""; 
      tabledata += "<tr class =\"tableHeader\">"; 
      tabledata += "<td>Retailer</td>"; 
      tabledata += "<td>Impressions</td>"; 
      tabledata += "<td>Clicks</td>"; 
      tabledata += "<td>CTR</td>"; 
      tabledata += "<td>Percentage</td>"; 
      tabledata += "</tr>"; 
      for (var i = 0; i < data.length; i++) { 
       var impDataRow = data[i]; 
       tabledata += "<tr>"; 
       tabledata += "<td>" + impDataRow.RetailerDescription + "</td>"; 
       tabledata += "<td>" + impDataRow.RetailerImpressionCount + "</td>"; 
       tabledata += "<td>" + impDataRow.RetailerClickCount + "</td>"; 
       tabledata += "<td>" + impDataRow.ClickThroughRate.toFixed(2) + "%</td>"; 
       tabledata += "<td>" + impDataRow.Percentage.toFixed(2) + "%</td>"; 
       tabledata += "</tr>"; 

      } 
       //tabledata += "<tfoot>"; 
       tabledata += "<tr>"; 
       tabledata += "<td>Total</td>"; 
       tabledata += "<td>" + impDataRow.TotalImpressionCount + "</td>"; 
       tabledata += "<td>" + impDataRow.TotalClickCount + "</td>"; 
       tabledata += "<td>" + impDataRow.TotalClickThroughRate.toFixed(2) + "%</td>"; 
       tabledata += "<td>" + impDataRow.TotalPercentage.toFixed(2) + "%</td>"; 
       tabledata += "</tr>"; 
       // tabledata += "</tfoot>"; 

      table.innerHTML = tabledata; 
      $("th"); 
      $("tr:even"); 
      $("tr:odd"); 
     } 
    } 
     ); 
    }); 


    //]]> 

編輯

我認爲（雖然不確定），這是行不通的Safari瀏覽器mac中：

csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv); 

我正在進一步調查，但是這應該設置爲特別是爲safari？ - 我知道Safari瀏覽器有安全的MIME類型，但它們是否具有csv的安全MIME類型？

編輯

雖然沒有理想的我創建只是野生動物園一個新的按鈕和使用：

csvData = 'data:text/plain,' + encodeURIComponent(csv); 

，因爲這被認爲是在Safari安全MIME類型它打開它在一個新的標籤 - 排序什麼，我是lokoing ...

現在我打電話與IE9試圖找到一個解決方案，在ie aswel工作。

下面是一個事物的轎跑車到目前爲止，我已經試過：

http://blog.paxcel.net/blog/savedownload-file-using-html5-javascript-the-download-attribute-2/

但我可以噸得到這個工作

和

http://www.kunalbabre.com/projects/table2CSV.php

選項3。1在這個網頁上工作，但我不熟悉PHP，所以不知道如何使它爲我工作。

編輯

希望這可以按住接聽：

http://onwebdev.blogspot.com/2011/02/jquery-creating-csv-file.html

編輯 現在看這個：

Export html table to excel in asp.net MVC2

設法得到它的工作..

編輯

使用Safari和IE 10

上述作品一如往常的任何輸入非常感謝！

Answer 1

對於IE 9能正常工作，請嘗試：

的問題發生在IE瀏覽器，如果你有，在高級選項卡上的設置，「不加密的文件保存到磁盤」集，您的網站在運行HTTPS。此設置主動防止下載（當然）。衛生署！

這裏瑤池：https://drupal.org/node/1736296

爲IE 5 - 8參見：http://support.microsoft.com/kb/323308