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 или выше. Как @Терри Янг объясняет, как использовать-в-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 (это нужно сказать).
Ответы
Ответ 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();
Для получения дополнительной информации я написал учебник по этому вопросу, см. Загрузка данных JSON в формате CSV Поддержка кросс-браузера
Надеюсь, это будет полезно для вас.
Ответ 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();
Что бы записать файл непосредственно в файловую систему пользователя. Однако, как правило, это приведет к тому, что пользователь спросит, хотите ли они разрешить запуск script. Запрос можно отключить в среде интрасети.
Ответ 3
У меня есть решение для него, которое поддерживает 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
Это также один из ответов, который я использовал и отлично работаю для версий 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
Это будет работать в любом браузере без необходимости jQuery.
-
Добавьте следующий iframe в любом месте вашей страницы:
<iframe id="CsvExpFrame" style="display: none"></iframe>
-
Укажите идентификатор таблицы на странице, которую вы хотите экспортировать:
<table id="dataTable">
-
Настройте свою ссылку или кнопку, чтобы вызвать функцию ExportToCsv, передав имя файла по умолчанию и идентификатор таблицы в качестве параметров. Например:
<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>[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>
Ответ 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>