首先,先在<head>中引入papaparse.min.js(已经下载到了本地,如果没下载可以采用类似jquery的方式引用)和jquery.js。papaparse是专门分析CSV的插件,jquery为了支持html拼接。
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="./papaparse.min.js"><scripte>
然后,在<body>中加入分析CSV文件的js脚本,把CSV分析出来的内容拼接到html中。
<script>
Papa.parse('./output-example.csv', {
download: true, //
complete: function(results) { //csv分析结束要执行的函数,除了complete还可以加before,error等情况的分析函数
var data = results.data;
var append_html;
for(var i = 0, k= data.length-1; i < k; i++) {
var item = data[i];
//item为csv的一行,item[0],item[1]...item[k]为行内的每一个元素
//这里写对item的处理
append_html += '<li>'+item[0].substring(0)+' '+item[1].substring(0)+'</li>';
//将append_html添加到$(#elementid element)后面,elementid为元素id, element为具体元素,如<li id="liid"> <ul></ul></li>,对于下面的拼接代码是将append_html的内容加入到了<ul>后面
$(#liid ul).append(append_html)
}
});
</script>