More than 3 years have passed since last update.

FileAPI と、jquery.csv を使って csv を表示する

Last updated at 2021-12-07Posted at 2017-06-30

実行結果

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.21/jquery.csv.min.js"></script>
<script src="csv_convert.js"></script> 
<script src="list_to_table.js"></script> 
<link rel="stylesheet" href="table.css">
<title>CSV ファイルの読み込みと表示</title>
</head>
<body>
<h2>jquery-csv</h2>
<input type="file" id="getfile" accept="text/csv">
<p />

<pre id="preview" ></pre>
<p />
<div id="contents"></div>
<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>
<hr />
Dec/07/2021<p />
</body>
</html>

csv_convert.js

// -------------------------------------------------------------------
//	csv_convert.js
//
//					Dec/07/2021
// -------------------------------------------------------------------
jQuery (function ()
{
	jQuery("#outarea_aa").text ("*** csv_convert.js *** 開始 ***")

	var file = jQuery('#getfile')[0]

	change_monitor (file)

	jQuery("#outarea_hh").text ("*** csv_convert.js *** 終了 ***")

})

// -------------------------------------------------------------------
function change_monitor (file)
{
	file.onchange = function ()
	{
	const fileList = file.files
	var reader = new FileReader()
	reader.readAsText(fileList[0])

	reader.onload = function ()
		{
		csv_convert_proc (reader.result)
		}
	}

}

// -------------------------------------------------------------------
function csv_convert_proc (str_in)
{
	jQuery('#outarea_bb').text("*** csv_convert_proc *** start ***")
	jQuery('#preview').text(str_in)

    // build HTML table data from an array (one or two dimensional)
	var data = jQuery.csv.toArrays(str_in)

	var html = list_to_table_proc(data)

	jQuery('#contents').html(html)
}

// -------------------------------------------------------------------

list_to_table.js

// -------------------------------------------------------------------
//	list_to_table.js
//
//					Jun/30/2017
// -------------------------------------------------------------------
    // build HTML table data from an array (one or two dimensional)
function list_to_table_proc(data)
{
      var html = '';

      if(typeof(data[0]) === 'undefined') {
        return null;
      }

      if(data[0].constructor === String) {
        html += '<tr>\r\n';
        for(var item in data) {
          html += '<td>' + data[item] + '</td>\r\n';
        }
        html += '</tr>\r\n';
      }

      if(data[0].constructor === Array) {
        for(var row in data) {
          html += '<tr>\r\n';
          for(var item in data[row]) {
            html += '<td>' + data[row][item] + '</td>\r\n';
          }
          html += '</tr>\r\n';
        }
      }

      if(data[0].constructor === Object) {
        for(var row in data) {
          html += '<tr>\r\n';
          for(var item in data[row]) {
            html += '<td>' + item + ':' + data[row][item] + '</td>\r\n';
          }
          html += '</tr>\r\n';
        }
      }
      
	return html;
}

// -------------------------------------------------------------------

table.css

/* -------------------------------------------------------------- */
/*
	table.css
*/
/* -------------------------------------------------------------- */
table,td,th {
table-layout:fixed;
border:1px #ff00ff solid;
}

/* -------------------------------------------------------------- */

jquery-3.6.0.min.js で動作を確認しました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up