无法将数据导出到csv文件的javascript代码，无法用“，”定界数据
[英]javascript code to export data to a csv file failing to delimit data by “,”
问题描述
背景资料
我正在尝试编写一些javascript / HTML逻辑，该逻辑会将某些数据导出为csv格式，并在Excel或工作站上默认的csv应用程序中打开一个新文档。
问题
该代码成功创建了一个新的csv文件，并提示您保存该文件，但是在Excel中显示该文件时，所有内容都位于一列中，而不是分成多列。
代码：
function exportTableToCSV($tableName, fileName) {
var csv = GetCellValues($tableName);
console.log(csv);
console.log("filename is:" + fileName);
if (navigator.userAgent.search("Trident") >= 0) {
//this is the path that is execute in IE10 browser...
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($table) {
var $rows = $table.find('tr:has(td),tr:has(th)'),
// 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, th');
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);
csvData = csv;
return csvData;
};
Excel中的CSV文件
我没有一列数据，而是有一列数据，其中所有7个值都由逗号分隔。
上面代码的控制台输出：
HTML1300: Navigation occurred.
group_membership_list.html
"Group Name","PD Number","Dest","Department","First Name","Last Name","ttp"
"Test Group","45721","test1@hotmail.com","undefined","Daniel","Pamplemouse","smtp"
"Test Group","45721","test1@hotmail.com","undefined","Daniel","Pamplemouse","smtp"
"Test Group","46481","test1@hotmail.com","undefined","Benjamin","Grouper","smtp"
"Test Group","48381","test1@hotmail.com","undefined","Gregory","Erock","smtp"
"Test Group","48381","test1@hotmail.com","undefined","Gregory","Erock","smtp"
"Test Group","48382","test1@hotmail.com","undefined","Jonathan","David","smtp"
"Test Group","48382","test1@hotmail.com","undefined","Jonathan","David","smtp"
"Test Group","45303","test1@hotmail.com","undefined","Harold","Cause","smtp"
"Test Group","45303","test1@hotmail.com","undefined","Harold","Cause","smtp"
"Test Group","45306","test1@hotmail.com","undefined","Micah","Latin","smtp"
filename is:Group Membership List.csv
到目前为止，我尝试过的是：
我试图改变这一点：
colDelim = ',',
到colDelim ='\\，'，
但这并没有改变。 我敢肯定这很简单，但是我似乎看不到我的错误。 任何帮助，将不胜感激。
编辑1
我也尝试更改：
window.CsvExpFrame.document.write(csv);
对此：
window.CsvExpFrame.document.write('sep=,\r\n' + csv);
基于以下stackoverflow问题： Javascript / jQuery：以CSV格式导出数据在IE中不起作用
但这仍然是不行的。
编辑2
作为测试，我获取了Web应用程序创建的csv文件的副本，并尝试通过Excel导入它。 我选择逗号作为分隔符。 最终结果是它失败了-也就是所有数据最终都集中在一列中。
我想这意味着我在代码中创建分隔符的方式是错误的。 我更改了代码以使用此代码：
colDelim = '","',
并重试。 当通过网络应用程序打开文件时，它仍然会失败，但是如果我获取该文件并在Excel中再次手动将其导入，则此文件可以正常工作。
编辑3
它似乎与引号有关。 从控制台输出中可以看到，似乎每个字段都已正确地括在引号中，并用逗号分隔。 但是，当我在Excel中检查数据时，第一个字段（“测试Grp”）实际上缺少引号。 看起来像这样：
Group Name,"PD Number","Dest","Department","First Name","Last Name","ttp"
Test Group,"45721","test1@hotmail.com","undefined","Daniel","Pamplemouse","smtp"
编辑4
因此，我将代码更改为如下所示：
// actual delimiter characters for CSV format
colDelim = '"\,"',
rowDelim = '"\r\n"',
现在，尽管IE仍然失败，但其他浏览器（例如Chrome）始终可以与此组合一起使用。 另外，尽管IE无法正确打开文件，但是当我手动将网页生成的csv文件导入Excel时，它可以正确解析。 另一个有趣的工件。 IE生成的文件的名称是
Group Membership List_csv.csv
而Chrome会创建：
Group Membership List.csv
2 个解决方案
解决方案1
2 2017-05-03 00:23:48
背景资料
我正在尝试编写一些javascript / HTML逻辑，该逻辑会将某些数据导出为csv格式，并在Excel或工作站上默认的csv应用程序中打开一个新文档。
问题
该代码成功创建了一个新的csv文件，并提示您保存该文件，但是在Excel中显示该文件时，所有内容都位于一列中，而不是分成多列。
代码：
function exportTableToCSV($tableName, fileName) {
var csv = GetCellValues($tableName);
console.log(csv);
console.log("filename is:" + fileName);
if (navigator.userAgent.search("Trident") >= 0) {
//this is the path that is execute in IE10 browser...
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($table) {
var $rows = $table.find('tr:has(td),tr:has(th)'),
// 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, th');
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);
csvData = csv;
return csvData;
};
Excel中的CSV文件
我没有一列数据，而是有一列数据，其中所有7个值都由逗号分隔。
上面代码的控制台输出：
HTML1300: Navigation occurred.
group_membership_list.html
"Group Name","PD Number","Dest","Department","First Name","Last Name","ttp"
"Test Group","45721","test1@hotmail.com","undefined","Daniel","Pamplemouse","smtp"
"Test Group","45721","test1@hotmail.com","undefined","Daniel","Pamplemouse","smtp"
"Test Group","46481","test1@hotmail.com","undefined","Benjamin","Grouper","smtp"
"Test Group","48381","test1@hotmail.com","undefined","Gregory","Erock","smtp"
"Test Group","48381","test1@hotmail.com","undefined","Gregory","Erock","smtp"
"Test Group","48382","test1@hotmail.com","undefined","Jonathan","David","smtp"
"Test Group","48382","test1@hotmail.com","undefined","Jonathan","David","smtp"
"Test Group","45303","test1@hotmail.com","undefined","Harold","Cause","smtp"
"Test Group","45303","test1@hotmail.com","undefined","Harold","Cause","smtp"
"Test Group","45306","test1@hotmail.com","undefined","Micah","Latin","smtp"
filename is:Group Membership List.csv
到目前为止，我尝试过的是：
我试图改变这一点：
colDelim = ',',
到colDelim ='\\，'，
但这并没有改变。 我敢肯定这很简单，但是我似乎看不到我的错误。 任何帮助，将不胜感激。
编辑1
我也尝试更改：
window.CsvExpFrame.document.write(csv);
对此：
window.CsvExpFrame.document.write('sep=,\r\n' + csv);
基于以下stackoverflow问题： Javascript / jQuery：以CSV格式导出数据在IE中不起作用
但这仍然是不行的。
编辑2
作为测试，我获取了Web应用程序创建的csv文件的副本，并尝试通过Excel导入它。 我选择逗号作为分隔符。 最终结果是它失败了-也就是所有数据最终都集中在一列中。
我想这意味着我在代码中创建分隔符的方式是错误的。 我更改了代码以使用此代码：
colDelim = '","',
并重试。 当通过网络应用程序打开文件时，它仍然会失败，但是如果我获取该文件并在Excel中再次手动将其导入，则此文件可以正常工作。
编辑3
它似乎与引号有关。 从控制台输出中可以看到，似乎每个字段都已正确地括在引号中，并用逗号分隔。 但是，当我在Excel中检查数据时，第一个字段（“测试Grp”）实际上缺少引号。 看起来像这样：
Group Name,"PD Number","Dest","Department","First Name","Last Name","ttp"
Test Group,"45721","test1@hotmail.com","undefined","Daniel","Pamplemouse","smtp"
编辑4
因此，我将代码更改为如下所示：
// actual delimiter characters for CSV format
colDelim = '"\,"',
rowDelim = '"\r\n"',
现在，尽管IE仍然失败，但其他浏览器（例如Chrome）始终可以与此组合一起使用。 另外，尽管IE无法正确打开文件，但是当我手动将网页生成的csv文件导入Excel时，它可以正确解析。 另一个有趣的工件。 IE生成的文件的名称是
Group Membership List_csv.csv
而Chrome会创建：
Group Membership List.csv
解决方案2
0 2017-05-02 19:07:01
背景资料
我正在尝试编写一些javascript / HTML逻辑，该逻辑会将某些数据导出为csv格式，并在Excel或工作站上默认的csv应用程序中打开一个新文档。
问题
该代码成功创建了一个新的csv文件，并提示您保存该文件，但是在Excel中显示该文件时，所有内容都位于一列中，而不是分成多列。
代码：
function exportTableToCSV($tableName, fileName) {
var csv = GetCellValues($tableName);
console.log(csv);
console.log("filename is:" + fileName);
if (navigator.userAgent.search("Trident") >= 0) {
//this is the path that is execute in IE10 browser...
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($table) {
var $rows = $table.find('tr:has(td),tr:has(th)'),
// 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, th');
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);
csvData = csv;
return csvData;
};
Excel中的CSV文件
我没有一列数据，而是有一列数据，其中所有7个值都由逗号分隔。
上面代码的控制台输出：
HTML1300: Navigation occurred.
group_membership_list.html
"Group Name","PD Number","Dest","Department","First Name","Last Name","ttp"
"Test Group","45721","test1@hotmail.com","undefined","Daniel","Pamplemouse","smtp"
"Test Group","45721","test1@hotmail.com","undefined","Daniel","Pamplemouse","smtp"
"Test Group","46481","test1@hotmail.com","undefined","Benjamin","Grouper","smtp"
"Test Group","48381","test1@hotmail.com","undefined","Gregory","Erock","smtp"
"Test Group","48381","test1@hotmail.com","undefined","Gregory","Erock","smtp"
"Test Group","48382","test1@hotmail.com","undefined","Jonathan","David","smtp"
"Test Group","48382","test1@hotmail.com","undefined","Jonathan","David","smtp"
"Test Group","45303","test1@hotmail.com","undefined","Harold","Cause","smtp"
"Test Group","45303","test1@hotmail.com","undefined","Harold","Cause","smtp"
"Test Group","45306","test1@hotmail.com","undefined","Micah","Latin","smtp"
filename is:Group Membership List.csv
到目前为止，我尝试过的是：
我试图改变这一点：
colDelim = ',',
到colDelim ='\\，'，
但这并没有改变。 我敢肯定这很简单，但是我似乎看不到我的错误。 任何帮助，将不胜感激。
编辑1
我也尝试更改：
window.CsvExpFrame.document.write(csv);
对此：
window.CsvExpFrame.document.write('sep=,\r\n' + csv);
基于以下stackoverflow问题： Javascript / jQuery：以CSV格式导出数据在IE中不起作用
但这仍然是不行的。
编辑2
作为测试，我获取了Web应用程序创建的csv文件的副本，并尝试通过Excel导入它。 我选择逗号作为分隔符。 最终结果是它失败了-也就是所有数据最终都集中在一列中。
我想这意味着我在代码中创建分隔符的方式是错误的。 我更改了代码以使用此代码：
colDelim = '","',
并重试。 当通过网络应用程序打开文件时，它仍然会失败，但是如果我获取该文件并在Excel中再次手动将其导入，则此文件可以正常工作。
编辑3
它似乎与引号有关。 从控制台输出中可以看到，似乎每个字段都已正确地括在引号中，并用逗号分隔。 但是，当我在Excel中检查数据时，第一个字段（“测试Grp”）实际上缺少引号。 看起来像这样：
Group Name,"PD Number","Dest","Department","First Name","Last Name","ttp"
Test Group,"45721","test1@hotmail.com","undefined","Daniel","Pamplemouse","smtp"
编辑4
因此，我将代码更改为如下所示：
// actual delimiter characters for CSV format
colDelim = '"\,"',
rowDelim = '"\r\n"',
现在，尽管IE仍然失败，但其他浏览器（例如Chrome）始终可以与此组合一起使用。 另外，尽管IE无法正确打开文件，但是当我手动将网页生成的csv文件导入Excel时，它可以正确解析。 另一个有趣的工件。 IE生成的文件的名称是
Group Membership List_csv.csv
而Chrome会创建：
Group Membership List.csv
如何使用 JavaScript 将 MySQL 数据导出到 CSV 文件中？
[英]How to export MySQL data into a CSV file using JavaScript?
仅使用Javascript / JQuery将网格数据导出到CSV文件并以扩展名.csv保存
[英]Export grid data to a CSV file and save it with extension .csv by just using Javascript/JQuery
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
将数据导出到 JavaScript 中的 CSV
无需服务器交互即可将 javascript 数据导出到 CSV 文件
如何使用 JavaScript 将 MySQL 数据导出到 CSV 文件中？
将数据正确导出到 CSV 文件
如何使用JQuery或Javascript导出到CSV数据
在 JavaScript 中使用 # 字符导出 CSV 数据不起作用
如何使用 Javascript 将数据导出到 CSV？
Javascript和PHP将数据导出到文件
仅使用Javascript / JQuery将网格数据导出到CSV文件并以扩展名.csv保存
将异步数据库的数据导出到csv文件中
相关标签