web-dev-qa-db-ja.com

JavaScript / jQuery：CSVでのデータのエクスポートがIE

テーブルに表示されたデータをCSV形式にエクスポートする必要があります。私は多くのことを試しましたが、IE 9以上では機能しませんでした。

私のコードには ダミーのフィドルを作成 があります。

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);
}

Stackoverflowで多くのリンクを見てきましたが、IE9以上で動作するものを見つけることができませんでした。似ています @ Terry Youngが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をエクスポートしたくありません（要件はそうです）。

javascriptexport-to-csv
19
Shubh

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();

詳細については、私がそのチュートリアルを書いているので、- JSONデータをCSV形式でダウンロードしてクロスブラウザサポート を参照してください。

これがあなたに役立つことを願っています。

17
inaam husain

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();

これは、ファイルをユーザーのファイルシステムに直接書き込みます。ただし、通常は、スクリプトの実行を許可するかどうかをユーザーに尋ねます。プロンプトは、イントラネット環境では無効にできます。

6
Adam Matthews

これは私が使用した答えの1つでもあり、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);
        }           
    }

お役に立てれば。

5
arunsingh

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

4
user3679149

これは、jQueryがなくても、どのブラウザーでも機能します。

  1. 次のiframeをページの任意の場所に追加します。

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

  2. エクスポートするページのテーブルにIDを指定します。

    _<table id="dataTable">_

  3. リンクまたはボタンをカスタマイズしてExportToCsv関数を呼び出し、デフォルトのファイル名とテーブルのIDをパラメーターとして渡します。例えば：

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

  4. これを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>[email protected]</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>32</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>Sarah</td>
    <td>19</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>Anne</td>
    <td>25</td>
    <td>[email protected]</td>
  </tr>
</table>

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

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>
0
Nikita