首先崩泡,先在<head>中引入papaparse.min.js(已經(jīng)下載到了本地线梗,如果沒(méi)下載可以采用類(lèi)似jquery的方式引用)和jquery.js羽资。papaparse是專(zhuān)門(mén)分析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分析出來(lái)的內(nèi)容拼接到html中糊昙。
<script>
?Papa.parse('./output-example.csv', {
? ? ? ? download: true辛掠, ? ? ? ? ? ? ? ? ? ? ? //
? ? ? ? complete: function(results) { ? ?//csv分析結(jié)束要執(zhí)行的函數(shù),除了complete還可以加before释牺,error等情況的分析函數(shù)
? ? ? ? ? ? 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]為行內(nèi)的每一個(gè)元素
? ? ? ? ? ? ? ? //這里寫(xiě)對(duì)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>祭刚,對(duì)于下面的拼接代碼是將append_html的內(nèi)容加入到了<ul>后面
????????????????$(#liid ul).append(append_html)
? ? ? ? ? ? }
});
</script>