使用 Javascript 或 Jquery 自动导入本地 CSV 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24172045/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Automatically import a local CSV file with Javascript or Jquery
提问by Dorian Fabre
My client wants a website that includes importing CSV data WITHOUT it being hosted on a server. The idea is so that their sales people can demonstrate their products without having web access or hosting set up on their PCs. They will also be able to update the data by exporting a new CSV file from the original Excel document, without any knowledge of HTML or Javascript.
我的客户想要一个包含导入 CSV 数据而不托管在服务器上的网站。这个想法是为了让他们的销售人员可以展示他们的产品，而无需在他们的 PC 上访问网络或托管。他们还可以通过从原始 Excel 文档导出新的 CSV 文件来更新数据，而无需任何 HTML 或 Javascript 知识。
I've found quite a few solutions online - like Papa Parse (http://papaparse.com/) but all of them require the user to select a file using <input type="file" />. As an example, the following script, using Papa Parse, works perfectly well:
我在网上找到了很多解决方案——比如 Papa Parse ( http://papaparse.com/)，但所有这些都要求用户使用<input type="file" />. 例如，使用 Papa Parse 的以下脚本运行良好：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test CSV</title>
</head>
<body>
<input type="file" />
</body>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/jquery.parse.min.js"></script>
<script language="javascript">
$('input').change(function(e) {
$('input[type=file]').parse({
complete: function(data) {
console.log('Parse results:', data.results);
}
});
});
</script>
</html>
My problem is that I need to be able to hard-code the CSV file's location so that, when the web page is opened, the data is automatically displayed, without any further interaction by the user. Is this possible? Or have I overlooked something really basic?
我的问题是我需要能够对 CSV 文件的位置进行硬编码，以便在打开网页时自动显示数据，而无需用户进行任何进一步交互。这可能吗？还是我忽略了一些非常基本的东西？
回答by Shanimal
Hardcode the values inside a script tag of a non-javascript typesuch as text/csvthen extract it with innerHTML or $("#unparsed").html()
对非 javascript 的脚本标签内的值进行硬编码，type例如text/csv使用 innerHTML 或$("#unparsed").html()
<script type="text/csv" id="unparsed">
url,title,size
images/address-book.png?1354486198, Address Book, 1904 KB
images/front-row.png?1354486198, Front Row, 401 KB
images/google-pokemon.png?1354486198, Google Pokémon, 12875 KB
...
</script>
$(function parseData(){
$("#file").hide();
var data = $("#unparsed").html();
var parsed = $.parse(data);
$("#parsed").val(JSON.stringify(parsed));
})
http://jsbin.com/racanefi/10/edit
http://jsbin.com/racanefi/10/edit
Hardcode the values inside a textarea.
硬编码 textarea 内的值。
$(function parseData(){
$("#file").hide();
var data = $("#unparsed").val();
var parsed = $.parse(data);
$("#parsed").val(JSON.stringify(parsed));
})
http://jsbin.com/racanefi/8/edit
http://jsbin.com/racanefi/8/edit
OR
或者
Store the value in localStorage.
将值存储在 localStorage 中。
var storage = localStorage;
var key = 'unparsed_text_file';
function getFile(){
$("#file").change(function(){
var file = $(this).eq(0)[0].files[0],
reader = new FileReader();
reader.onload = function(e) {
var text = reader.result;
storage.setItem(key,text);
parseData();
};
reader.readAsText(file);
});
}
function parseData(){
$("#file").hide();
var data = storage.getItem(key);
var parsed = $.parse(data);
$("#unparsed").val(data);
$("#parsed").val(JSON.stringify(parsed));
}
if(storage.getItem(key))
parseData();
else
getFile();
http://jsbin.com/racanefi/6/edit
http://jsbin.com/racanefi/6/edit
Browser Compatibility:http://caniuse.com/namevalue-storage
浏览器兼容性：http : //caniuse.com/namevalue-storage
This is a rough draft, you should probably QA it well before implementing it.
这是一个粗略的草案，您可能应该在实施之前对其进行质量检查。
edit: I had it backwards sessionStorage is temporary across sessions. localStorage is more permanent. I created a variable that lets you assign your storage to a var storage
编辑：我倒退了 sessionStorage 在会话中是临时的。localStorage 更持久。我创建了一个变量，可让您将存储分配给var storage
回答by Evan Plaice
PapaParse is good quality stuff but for completion sake here's how it's done with jquery-csv
PapaParse 是高质量的东西，但为了完成，这里是如何使用jquery-csv 完成的
<html>
<head>
<meta charset="utf-8" />
<title>Demo - CSV-to-Table</title>
</head>
<body>
<div id="inputs" class="clearfix">
<input type="file" id="files" name="files[]" multiple />
</div>
<hr />
<output id="list">
</output>
<hr />
<table id="contents" style="width:100%; height:400px;" border>
</table>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://evanplaice.github.io/jquery-csv/src/jquery.csv.js"></script>
<script>
$(document).ready(function() {
if(isAPIAvailable()) {
$('#files').bind('change', handleFileSelect);
}
});
function isAPIAvailable() {
// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
// Great success! All the File APIs are supported.
return true;
} else {
// source: File API availability - http://caniuse.com/#feat=fileapi
// source: <output> availability - http://html5doctor.com/the-output-element/
document.writeln('The HTML5 APIs used in this form are only available in the following browsers:<br />');
// 6.0 File API & 13.0 <output>
document.writeln(' - Google Chrome: 13.0 or later<br />');
// 3.6 File API & 6.0 <output>
document.writeln(' - Mozilla Firefox: 6.0 or later<br />');
// 10.0 File API & 10.0 <output>
document.writeln(' - Internet Explorer: Not supported (partial support expected in 10.0)<br />');
// ? File API & 5.1 <output>
document.writeln(' - Safari: Not supported<br />');
// ? File API & 9.2 <output>
document.writeln(' - Opera: Not supported');
return false;
}
}
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
var file = files[0];
// read the file metadata
var output = ''
output += '<span style="font-weight:bold;">' + escape(file.name) + '</span><br />\n';
output += ' - FileType: ' + (file.type || 'n/a') + '<br />\n';
output += ' - FileSize: ' + file.size + ' bytes<br />\n';
output += ' - LastModified: ' + (file.lastModifiedDate ? file.lastModifiedDate.toLocaleDateString() : 'n/a') + '<br />\n';
// read the file contents
printTable(file);
// post the results
$('#list').append(output);
}
function printTable(file) {
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function(event){
var csv = event.target.result;
var data = $.csv.toArrays(csv);
var html = '';
for(var row in data) {
html += '<tr>\r\n';
for(var item in data[row]) {
html += '<td>' + data[row][item] + '</td>\r\n';
}
html += '</tr>\r\n';
}
$('#contents').html(html);
};
reader.onerror = function(){ alert('Unable to read ' + file.fileName); };
}
</script>
</body>
</html>Feature detection (ie which browsers won't work) is built-in, and the file has to be loaded via a file dialog because the sandbox protections block scripts from accessing the filesystem directly.
功能检测（即哪些浏览器不工作）是内置的，并且必须通过文件对话框加载文件，因为沙箱保护阻止脚本直接访问文件系统。
Disclaimer: I'm the author of jquery-csv.
免责声明：我是 jquery-csv 的作者。
