使用Javascript或Jquery自动导入本地CSV文件

我的客户想要一个包含导入CSV数据的网站，而不是托管在服务器上。 这样的想法是，他们的销售人员可以展示他们的产品，而无需在他们的PC上设置Web访问或托管。 他们还可以通过从原始Excel文档导出新的CSV文件来更新数据，而无需任何HTML或Javascript知识。

我在网上找到了不少解决方案 – 比如Papa Parse（ http://papaparse.com/ ），但所有这些解决方案都要求用户使用选择文件。 例如，使用Papa Parse的以下脚本运行良好：

             $('input').change(function(e) { $('input[type=file]').parse({ complete: function(data) { console.log('Parse results:', data.results); } }); });   

我的问题是我需要能够对CSV文件的位置进行硬编码，以便在打开网页时自动显示数据，而无需用户进行任何进一步的交互。 这可能吗？ 或者我忽略了一些非常基本的东西？

Answer 1

硬编码非javascript type的脚本标记内的值，例如text/csv然后使用innerHTML或$("#unparsed").html()提取它$("#unparsed").html()

  $(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

Answer 2

PapaParse是高质量的东西，但为了完成，这里是如何用jquery-csv完成的