我有一个表格数据,我需要在不使用任何外部插件或API的情况下将其导出到csv。我使用了window.open传递mime类型的方法
该代码应独立于系统上已安装的东西(例如,openoffice或ms 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时,我找不到要生成的那个?
请参阅下面的说明。
$(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发行票据#10396033)。
仅在Microsoft自己的开发人员工具/控制台中调用此命令会导致浏览器崩溃:
navigator.msSaveBlob(new Blob(["hello"], {type: "text/plain"}), "test.txt");
在我的第一个答案回答四年之后,新的IE版本包括IE10,IE11和Edge。它们都崩溃于Microsoft发明的功能(拍手慢)。
添加navigator.msSaveBlob支持需要您自担风险。
截至2013年 1. 通常,这将使用服务器端解决方案执行,但这是我尝试的客户端解决方案。简单地将HTML作为a转储Data URI将不起作用,但这是一个有用的步骤。所以:
<a>
笔记 您可以设置链接的样式,使其看起来像一个按钮。我会把这个努力留给你 IE具有数据URI限制。请参阅:数据URI方案和Internet Explorer 9错误 关于“下载”属性,请参阅以下内容:
浏览器测试包括:
内容编码
CSV可以正确导出,但是当导入Excel时,该字符ü将打印为ä。Excel错误地解释了该值。
引入var csv = '\ufeff';并然后Excel 2013+正确解释值。
var csv = '\ufeff'