使用Javascript或Jquery自动导入本地CSV文件 [英] Automatically import a local CSV file with Javascript or Jquery
问题描述
我的客户想要一个包含导入CSV数据的网站，而不是托管在服务器上。这样的想法是，他们的销售人员可以展示他们的产品，而无需在他们的PC上设置网络访问或主机。他们还可以通过从原始Excel文档导出新的CSV文件来更新数据，而不需要任何HTML或Javascript的知识。
我发现相当一个几个解决方案在线 - 如Papa Parse（ http://papaparse.com/ ），但所有这些都需要用户选择使用< input type =file/> 的文件。例如，使用Papa Parse的以下脚本工作得很好：
<！doctype html>
< html>
< head>
< meta charset =utf-8>
< title>测试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
< script type =text / csvid =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，GooglePokémon，12875 KB
...
< / script>
$（函数parseData（）{
$（＃file）。hide（）;
var data = $（＃unparsed）。
var parsed = $ .parse（data）;
$（＃parsed）val（JSON.stringify（parsed））;
}）
http：// jsbin.com/racanefi/10/edit
硬编码textarea中的值。
$（function parseData（）{
$（＃file）。hide（）;
var data = $（＃unparsed ;
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 .files [0]，
reader = new FileReader（）;
reader.onload = function（e）{
var text = reader.result;
storage.setItem ，text）;
parseData（）;
};
reader.readAsText（file）;
}）;
}
function parseData（）{
$（＃file）。
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
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.
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:
<!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?
Hardcode the values inside a script tag of a non-javascript type such as text/csv then extract it with innerHTML or $("#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
Hardcode the values inside a textarea.
$(function parseData(){
$("#file").hide();
var data = $("#unparsed").val();
var parsed = $.parse(data);
$("#parsed").val(JSON.stringify(parsed));
})
http://jsbin.com/racanefi/8/edit
OR
Store the value in 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
Browser Compatibility: 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
这篇关于使用Javascript或Jquery自动导入本地CSV文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
