使用 jQuery 和 HTML 导出为 CSV
Posted
技术标签:
【中文标题】使用 jQuery 和 HTML 导出为 CSV【英文标题】：Export to CSV using jQuery and HTML 【发布时间】：2013-04-11 07:23:02 【问题描述】：我有一个表格数据，我需要在不使用任何外部插件或 API 的情况下将其导出到 csv。我使用 window.open 方法传递 MIME 类型，但遇到如下问题：
How to determine whether Microsoft Excel or OpenOffice is installed on the system using jQuery
代码应该独立于系统上安装的内容，即 OpenOffice 或 Microsoft Excel。我相信 CSV 是可以预期在两个编辑器中显示的格式。
代码
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
$("#btnExport").click(function(e)
var msg = GetMimeTypes();
//OpenOffice
window.open('data:application/vnd.oasis.opendocument.spreadsheet,' + $('#dvData').html());
//MS-Excel
window.open('data:application/vnd.ms-excel,' + $('#dvData').html());
//CSV
window.open('data:application/csv,charset=utf-8,' + $('#dvData').html());
e.preventDefault();
);
);
function GetMimeTypes ()
var message = "";
// Internet Explorer supports the mimeTypes collection, but it is always empty
if (navigator.mimeTypes && navigator.mimeTypes.length > 0)
var mimes = navigator.mimeTypes;
for (var i=0; i < mimes.length; i++)
message += "<b>" + mimes[i].type + "</b> : " + mimes[i].description + "<br />";
else
message = "Your browser does not support this ";
//sorry!
return ( message);
</script>
</head>
<body>
<div id="dvData">
<table>
<tr>
<th>Column One </th>
<th>Column Two</th>
<th>Column Three</th>
</tr>
<tr>
<td>row1 Col1</td>
<td>row1 Col2</td>
<td>row1 Col3</td>
</tr>
<tr>
<td>row2 Col1</td>
<td>row2 Col2</td>
<td>row2 Col3</td>
</tr>
<tr>
<td>row3 Col1</td>
<td>row3 Col2</td>
<td>row3 Col3</td>
</tr>
</table>
</div>
<br/>
<input type="button" id="btnExport" value=" Export Table data into Excel " />
</body>
错误
CSV：无法被浏览器识别
ODS 和 Excel： 正在运行，但是当系统安装了 excel 或 openoffice 时，我无法找到生成哪个？
IE 8 版：完全不工作，在新窗口中打开，如下图所示。
【问题讨论】：
您到底面临什么问题？我不明白。 我无法使用 jquery 和 html 将其导出到 csv...我不想使用任何插件...我使用了 mime 类型，但它似乎不起作用 然后显示一些代码并描述究竟是什么不起作用？您收到什么错误消息？等等。 @Pekka웃：请参阅编辑，如果您现在不明白，请具体询问，谢谢 发生了什么事@Pekka웃....你这边没有解决方案？？？ 【参考方案1】：演示
请参阅下面的说明。
$(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(/"/g, '""'); // escape double quotes
).get().join(tmpColDelim);
).get().join(tmpRowDelim)
.split(tmpRowDelim).join(rowDelim)
.split(tmpColDelim).join(colDelim) + '"';
// Deliberate 'false', see comment below
if (false && window.navigator.msSaveBlob)
var blob = new Blob([decodeURIComponent(csv)],
type: 'text/csv;charset=utf8'
);
// Crashes in IE 10, IE 11 and Microsoft Edge
// See MS Edge Issue #10396033
// Hence, the deliberate 'false'
// This is here just for completeness
// Remove the 'false' at your own risk
window.navigator.msSaveBlob(blob, filename);
else if (window.Blob && window.URL)
// HTML5 Blob
var blob = new Blob([csv],
type: 'text/csv;charset=utf-8'
);
var csvUrl = URL.createObjectURL(blob);
$(this)
.attr(
'download': filename,
'href': csvUrl
);
else
// Data URI
var 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
var args = [$('#dvData>table'), 'export.csv'];
exportTableToCSV.apply(this, args);
// If CSV, don't do event.preventDefault() or return false
// We actually need this to be a typical hyperlink
);
);a.export,
a.export:visited
display: inline-block;
text-decoration: none;
color: #000;
background-color: #ddd;
border: 1px solid #ccc;
padding: 8px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="export">Export Table data into Excel</a>
<div id="dvData">
<table>
<tr>
<th>Column One</th>
<th>Column Two</th>
<th>Column Three</th>
</tr>
<tr>
<td>row1 Col1</td>
<td>row1 Col2</td>
<td>row1 Col3</td>
</tr>
<tr>
<td>row2 Col1</td>
<td>row2 Col2</td>
<td>row2 Col3</td>
</tr>
<tr>
<td>row3 Col1</td>
<td>row3 Col2</td>
<td>row3 Col3</td>
</tr>
<tr>
<td>row4 'Col1'</td>
<td>row4 'Col2'</td>
<td>row4 'Col3'</td>
</tr>
<tr>
<td>row5 "Col1"</td>
<td>row5 "Col2"</td>
<td>row5 "Col3"</td>
</tr>
<tr>
<td>row6 "Col1"</td>
<td>row6 "Col2"</td>
<td>row6 "Col3"</td>
</tr>
</table>
</div>截至 2017 年
现在使用 HTML5 Blob 和 URL 作为首选方法，Data URI 作为备用方法。
在 Internet Explorer 上
其他答案建议window.navigator.msSaveBlob；但是，已知会崩溃 IE10/Window 7 和 IE11/Windows 10。是否可以使用 Microsoft Edge 尚不确定（请参阅 Microsoft Edge issue ticket #10396033）。
仅仅在微软自己的开发者工具/控制台中调用这个会导致浏览器崩溃：
navigator.msSaveBlob(new Blob(["hello"], type: "text/plain"), "test.txt");
在我第一次回答四年后，新的 IE 版本包括 IE10、IE11 和 Edge。他们都在微软发明的功能上崩溃了（慢拍）。
添加
navigator.msSaveBlob支持需要您自担风险。
截至 2013 年
通常这将使用服务器端解决方案执行，但这是我对客户端解决方案的尝试。简单地将 HTML 转储为 Data URI 是行不通的，但这是一个有用的步骤。所以：
-
将表格内容转换为有效的 CSV 格式字符串。 （这是最简单的部分。）
强制浏览器下载它。
window.open 方法在 Firefox 中不起作用，所以我使用了 <a href="Data URI here">。
使用<a> 标签的download 属性指定默认文件名，该属性仅适用于Firefox 和Google Chrome。由于它只是一个属性，它会优雅地降级。
注意事项
您可以设置链接样式，使其看起来像一个按钮。我会把这项工作留给你 IE 有数据 URI 限制。见：Data URI scheme and Internet Explorer 9 Errors关于“下载”属性，请参见：
Downloading resources in HTML5: a[download] Bug 676619 - Implement proposed download attribute How to detect support for the HTML5 “download” attribute兼容性
浏览器测试包括：
Firefox 20+，Win/Mac（工作） Google Chrome 26+，Win/Mac（工作） Safari 6，Mac（工作，但文件名被忽略） IE 9+（失败）内容编码
CSV 已正确导出，但在导入 Excel 时，字符 ü 会打印为 ä。 Excel 对值的解释不正确。
引入 var csv = '\ufeff';，然后 Excel 2013+ 会正确解释这些值。
如果您需要与 Excel 2007 兼容，请在每个数据值处添加 UTF-8 前缀。另见：
Is it possible to force Excel recognize UTF-8 CSV files automatically? Microsoft Excel mangles Diacritics in .csv files? Adding UTF-8 BOM to string/Blob【讨论】：
它非常适合我的要求；只是 for 不占用考虑中的表的我不确定上述 CSV 生成代码是否如此出色，因为它似乎跳过了 th 单元格，并且似乎也不允许在值中使用逗号。所以这是我的 CSV 生成代码，可能有用。
它确实假设你有 $table 变量，它是一个 jQuery 对象（例如。var $table = $('#yourtable');）
$rows = $table.find('tr');
var csvData = "";
for(var i=0;i<$rows.length;i++)
var $cells = $($rows[i]).children('th,td'); //header or content cells
for(var y=0;y<$cells.length;y++)
if(y>0)
csvData += ",";
var txt = ($($cells[y]).text()).toString().trim();
if(txt.indexOf(',')>=0 || txt.indexOf('\"')>=0 || txt.indexOf('\n')>=0)
txt = "\"" + txt.replace(/\"/g, "\"\"") + "\"";
csvData += txt;
csvData += '\n';
【讨论】：
【参考方案3】： <a id="export" role='button'>
Click Here To Download Below Report
</a>
<table id="testbed_results" style="table-layout:fixed">
<thead>
<tr style="color:white" bgcolor="#3195A9" id="tblHeader">
<th>Name</th>
<th>Date</th>
<th>Speed</th>
<th>Column2</th>
<th>Interface</th>
<th>Interface2</th>
<th>Sub</th>
<th>COmpany result</th>
<th>company2</th>
<th>Gen</th>
</tr>
</thead>
<tbody>
<tr id="samplerow">
<td>hello</td>
<td>100</td>
<td>200</td>
<td>300</td>
<td>html2svc</td>
<td>ajax</td>
<td>200</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>hello</td>
<td>100</td>
<td>200</td>
<td>300</td>
<td>html2svc</td>
<td>ajax</td>
<td>200</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
$(document).ready(function ()
Html2CSV('testbed_results', 'myfilename','export');
);
function Html2CSV(tableId, filename,alinkButtonId)
var array = [];
var headers = [];
var arrayItem = [];
var csvData = new Array();
$('#' + tableId + ' th').each(function (index, item)
headers[index] = '"' + $(item).html() + '"';
);
csvData.push(headers);
$('#' + tableId + ' tr').has('td').each(function ()
$('td', $(this)).each(function (index, item)
arrayItem[index] = '"' + $(item).html() + '"';
);
array.push(arrayItem);
csvData.push(arrayItem);
);
var fileName = filename + '.csv';
var buffer = csvData.join("\n");
var blob = new Blob([buffer],
"type": "text/csv;charset=utf8;"
);
var link = document.getElementById(alinkButton);
if (link.download !== undefined) // feature detection
// Browsers that support HTML5 download attribute
link.setAttribute("href", window.URL.createObjectURL(blob));
link.setAttribute("download", fileName);
else if (navigator.msSaveBlob) // IE 10+
link.setAttribute("href", "#");
link.addEventListener("click", function (event)
navigator.msSaveBlob(blob, fileName);
, false);
else
// it needs to implement server side export
link.setAttribute("href", "http://www.example.com/export");
</script>
【讨论】：
你应该添加一些文字为什么以及如何你的代码解决问题【参考方案4】：@Terry Young 答案的小更新，即添加 IE 10+ 支持
if (window.navigator.msSaveOrOpenBlob)
// IE 10+
var blob = new Blob([decodeURIComponent(encodeURI(csvString))],
type: 'text/csv;charset=' + document.characterSet
);
window.navigator.msSaveBlob(blob, filename);
else
// actual real browsers
//Data URI
csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csvData);
$(this).attr(
'download': filename,
'href': csvData,
'target': '_blank'
);
【讨论】：
这对 IE9 是否可以像type: 'data:application/vnd.ms-excel;' 一样将 html 表导出到 excel 中？谢谢【参考方案5】：
如果您有 CSV 格式的数据并将其转换为 HTML 以显示在网页上会怎样？ 您可以使用http://code.google.com/p/js-tables/ 插件。 检查这个例子http://code.google.com/p/js-tables/wiki/Table 由于您已经在使用 jQuery 库，我假设您能够添加其他 javascript 工具包库。
如果数据是 CSV 格式，您应该能够使用通用的“应用程序/八位字节流”mime 类型。 您尝试过的所有 3 种 mime 类型都依赖于客户端计算机上安装的软件。
【讨论】：
【参考方案6】：据我了解，您的数据位于表格中，并且您希望从该数据创建 CSV。但是，您在创建 CSV 时遇到问题。
我的想法是迭代和解析表的内容，并从解析的数据生成一个字符串。您可以查看How to convert JSON to CSV format and store in a variable 的示例。您在示例中使用了 jQuery，因此这不算作外部插件。然后，您只需按照建议使用window.open 提供结果字符串并使用application/octetstream。
【讨论】：
以上是关于使用 jQuery 和 HTML 导出为 CSV的主要内容，如果未能解决你的问题，请参考以下文章
这个简单、易于实现的库可以将HTML表导出为xlsx、xls、csv和txt文件。