Dor*_*bre 2 javascript csv jquery local
我的客户想要一个网站,其中包括导入CSV数据,而不是托管在服务器上.这样的想法是,他们的销售人员可以展示他们的产品,而无需在他们的PC上设置Web访问或托管.他们还可以通过从原始Excel文档导出新的CSV文件来更新数据,而无需任何HTML或Javascript知识.
我在网上找到了不少解决方案 - 比如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>
我的问题是我需要能够对CSV文件的位置进行硬编码,以便在打开网页时自动显示数据,而无需用户进行任何进一步的交互.这可能吗？或者我忽略了一些非常基本的东西？
对非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
硬编码textarea中的值.
$(function parseData(){
$("#file").hide();
var data = $("#unparsed").val();
var parsed = $.parse(data);
$("#parsed").val(JSON.stringify(parsed));
})
http://jsbin.com/racanefi/8/edit
要么
将值存储在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 ://caniuse.com/namevalue-storage
这是一个粗略的草案,你应该在实现它之前做好准备.
编辑:我向后调度sessionStorage是临时会话.localStorage更加永久.我创建了一个变量,可以将存储分配给var storage