Javascript/ jQuery：以 CSV 格式导出数据在 IE 中不起作用

Posted 2023-02-14

【中文标题】Javascript/ jQuery：以 CSV 格式导出数据在 IE 中不起作用

【英文标题】：Javascript/ jQuery : Exporting data in CSV not working in IE

【发布时间】：2013-08-13 16:27:54

【问题描述】：

我需要将表格中显示的数据导出为 CSV 格式。我尝试了很多东西，但无法让它在 IE 9 及更高版本上运行。

我的代码中有created a dummy fiddle。

var data = [
    ["name1", "city1", "some other info"],
    ["name2", "city2", "more info"]
];//Some dummy data

var csv = ConvertToCSV(data);//Convert it to CSV format
var fileName = "test";//Name the file- which will be dynamic

if (navigator.userAgent.search("MSIE") >= 0) 
    //This peice of code is not working in IE, we will working on this
    //TODO
    var uriContent = "data:application/octet-stream;filename=" + fileName + '.csv' + "," + escape(csv);
    window.open(uriContent + fileName + '.csv');
 else 
    var uri = 'data:text/csv;charset=utf-8,' + escape(csv);
    var downloadLink = document.createElement("a");
    downloadLink.href = uri;
    downloadLink.download = fileName + ".csv";
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);

我在 *** 中看到了许多链接，但找不到任何适用于 IE9 或更高版本的链接。赞@ Terry Young explains in how-to-data-export-to-csv-using-jquery-or-javascript

也试过了-

var csv = ConvertToCSV(_tempObj);
        var fileName = csvExportFileName();
        if (navigator.appName != 'Microsoft Internet Explorer') 
            window.open('data:text/csv;charset=utf-8,' + escape(str));
        
        else 
            var popup = window.open('', 'csv', '');
            popup.document.body.innerhtml = '<pre>' + str + '</pre>';
        

不知道如何解决。我不想访问服务器并导出我的 CSV（要求是这样说的）。

【问题讨论】：

@Shubh 你有没有解决这个问题 - 我面临同样的问题 - 我看过这个解决方法 - blog.paxcel.net/blog/… 但它对我没有用

@anna Nopes. 我没能解决它。最后我不得不使用服务器端逻辑来获得想要的结果。

好的，谢谢你会一直在寻找什么，真是一场噩梦！

@inaamhusain 第三个对我有用。

【参考方案1】：

使用 Javascript 后它会解决你的问题。

在 IE 上使用这个，

var IEwindow = window.open();
IEwindow.document.write('sep=,\r\n' + CSV);
IEwindow.document.close();
IEwindow.document.execCommand('SaveAs', true, fileName + ".csv");
IEwindow.close();

有关我已经编写的教程的更多信息，请参阅 - Download JSON data in CSV format Cross Browser Support

希望这对你有帮助。

【讨论】：

谢谢，这节省了我的时间。

是否有指定分隔符而不实际将其插入 CSV 文件本身？出于某种原因，当我在 Chrome 中生成 CSV（使用类似于 OP 中的方法）时，Excel 可以在没有 sep=, 行的情况下很好地打开 CSV

我必须支持现代浏览器和 IE8。这段代码对我帮助很大。谢谢！

没有机会实现您的代码，但正如@GeoJacob 和 THarris 所说，这对他们有用，将您的答案标记为已接受。感谢您的帮助，希望对其他人有所帮助。

非常感谢您的解决方案。这帮助了我。此解决方案也可用于导出 XLS (Excel) 文件。要导出 excel 文件，请将“CSV”行替换为包含 excel 文件的 xml 定义的变量，然后将“.csv”扩展名替换为“.xls”。

【参考方案2】：

对于 IE 10+，您可以这样做：

var a = document.createElement('a');
        if(window.navigator.msSaveOrOpenBlob)
            var fileData = str;
            blobObject = new Blob([str]);
            a.onclick=function()
                window.navigator.msSaveOrOpenBlob(blobObject, 'MyFile.csv');
            
        
        a.appendChild(document.createTextNode('Click to Download'));
        document.body.appendChild(a);

我认为这在早期版本的 IE 中是不可能的。不调用 activeX 对象，但如果可以接受，您可以使用：

var sfo=new ActiveXObject('scripting.FileSystemObject');
var fLoc=sfo.CreateTextFile('MyFile.csv');
fLoc.WriteLine(str);
fLoc.close();

这会将文件直接写入用户的文件系统。但是，这通常会提示用户询问他们是否要允许脚本运行。在内网环境中可以禁用提示。

【参考方案3】：

这也是我在 IE 10+ 版本中使用的答案之一：

var csv = JSON2CSV(json_obj);            
var blob = new Blob([csv],type: "text/csv;charset=utf-8;");

if (navigator.msSaveBlob)  // IE 10+
navigator.msSaveBlob(blob, "fileName.csv")
     else 
        var link = document.createElement("a");
        if (link.download !== undefined)  // feature detection
            // Browsers that support HTML5 download attribute
            var url = URL.createObjectURL(blob);
            link.setAttribute("href", url);
            link.setAttribute("download", "fileName.csv");
            link.style = "visibility:hidden";
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
                   
    

希望这会有所帮助。

【参考方案4】：

我得到了支持 IE 8+ 的解决方案。我们需要指定分隔符，如下所示。

if (navigator.appName == "Microsoft Internet Explorer")     
    var oWin = window.open();
    oWin.document.write('sep=,\r\n' + CSV);
    oWin.document.close();
    oWin.document.execCommand('SaveAs', true, fileName + ".csv");
    oWin.close();
    

您可以通过链接http://andrew-b.com/view/article/44

【讨论】：

链接失效

【参考方案5】：

这适用于任何浏览器，无需 jQuery。

在页面的任意位置添加以下 iframe：

<iframe id="CsvExpFrame" style="display: none"></iframe>

为要导出的页面中的表指定一个 id：

<table id="dataTable">

自定义您的链接或按钮以调用 ExportToCsv 函数，将默认文件名和表 ID 作为参数传递。例如：

<input type="button" onclick="ExportToCsv('DefaultFileName','dataTable')"/>

将此添加到您的 JavaScript 文件或部分：

function ExportToCsv(fileName, tableName) 
  var data = GetCellValues(tableName);
  var csv = ConvertToCsv(data);
  if (navigator.userAgent.search("Trident") >= 0) 
    window.CsvExpFrame.document.open("text/html", "replace");
    window.CsvExpFrame.document.write(csv);
    window.CsvExpFrame.document.close();
    window.CsvExpFrame.focus();
    window.CsvExpFrame.document.execCommand('SaveAs', true, fileName + ".csv");
   else 
    var uri = "data:text/csv;charset=utf-8," + escape(csv);
    var downloadLink = document.createElement("a");
    downloadLink.href = uri;
    downloadLink.download = fileName + ".csv";
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
  
;

function GetCellValues(tableName) 
  var table = document.getElementById(tableName);
  var tableArray = [];
  for (var r = 0, n = table.rows.length; r < n; r++) 
    tableArray[r] = [];
    for (var c = 0, m = table.rows[r].cells.length; c < m; c++) 
      var text = table.rows[r].cells[c].textContent || table.rows[r].cells[c].innerText;
      tableArray[r][c] = text.trim();
    
  
  return tableArray;


function ConvertToCsv(objArray) 
  var array = typeof objArray != "object" ? JSON.parse(objArray) : objArray;
  var str = "sep=,\r\n";
  var line = "";
  var index;
  var value;
  for (var i = 0; i < array.length; i++) 
    line = "";
    var array1 = array[i];
    for (index in array1) 
      if (array1.hasOwnProperty(index)) 
        value = array1[index] + "";
        line += "\"" + value.replace(/"/g, "\"\"") + "\",";
      
    
    line = line.slice(0, -1);
    str += line + "\r\n";
  
  return str;
;

<table id="dataTable">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>Andrew</td>
    <td>20</td>
    <td>[e-mail]</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>32</td>
    <td>[e-mail]</td>
  </tr>
  <tr>
    <td>Sarah</td>
    <td>19</td>
    <td>[e-mail]</td>
  </tr>
  <tr>
    <td>Anne</td>
    <td>25</td>
    <td>[e-mail]</td>
  </tr>
</table>

<a href="#" onclick="ExportToCsv('DefaultFileName', 'dataTable');return true;">Click this to download a .csv</a>

【参考方案6】：

使用 Blob 对象 创建一个 blob 对象并使用 msSaveBlob 或 msSaveOrOpenBlob 该代码在 IE11 中运行（未针对其他浏览器进行测试）

    <script>


 var csvString ='csv,object,file';
    var blobObject = new Blob(csvString); 

        window.navigator.msSaveBlob(blobObject, 'msSaveBlob_testFile.txt'); // The user only has the option of clicking the Save button.
        alert('note the single "Save" button below.');

        var fileData = ["Data to be written in file."];
    //csv string object inside "[]"
        blobObject = new Blob(fileData);
        window.navigator.msSaveOrOpenBlob(blobObject, 'msSaveBlobOrOpenBlob_testFile.txt'); // Now the user will have the option of clicking the Save button and the Open button.`enter code here`
        alert('File save request made using msSaveOrOpenBlob() - note the two "Open" and "Save" buttons below.');
      </script>

【讨论】：

非常感谢。这个解决方案在 IE11 上对我有用。