| ■98054 / inTopicNo.15) |
Re[4]: CSVファイルの内容をそのままブラウザに表示したい |
□投稿者/ WebSurfer (2340回)-(2021/09/02(Thu) 11:40:46)
|
質問者さんはどこかに行ってしまったようですが・・・
結局は Teratail のスレッド、
https://teratail.com/questions/356280
の一番上の画像のように、CSV ファイルから取得したコンマ区切りのままの文字列を各行で改行してブラウザに
表示したいということのようですね。
で、どこかネットで見たスクリプトをコピペして使ってみたが、table, tr, td 要素の中に配置されてしまい、
期待する結果とならない。スクリプトを自力で書き直せるスキルがあれば対処できるが、そのスキルがないので
質問したと想像してます。
であれば、FileReader.result で取得したファイルの内容を、表示する div 要素の innerText に代入してやる
だけでやりたいことはできるはずです。
Teratail のスレッドの質問のスクリプトの余計な部分を以下のように削除・書き換えてやります。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Scripts/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function () {
var file = document.getElementById('file');
var result = document.getElementById('result');
// File APIに対応しているか確認
if (window.File && window.FileReader && window.FileList && window.Blob) {
function loadLocalCsv(e) {
// ファイル情報を取得
var fileData = e.target.files[0];
console.log(fileData); // 取得した内容の確認用
// CSVファイル以外は処理を止める
if (!fileData.name.match('.csv$')) {
alert('CSVファイルを選択してください');
return;
}
// FileReaderオブジェクトを使ってファイル読み込み
var reader = new FileReader();
// ファイル読み込みに成功したときの処理
//reader.onload = function () {
// var cols = reader.result.split('\n');
// var data = [];
// for (var i = 0; i < cols.length; i++) {
// data[i] = cols[i].split(',');
// }
// var insert = createTable(data);
// result.appendChild(insert);
//}
// 上のコードを以下のように変更
reader.onload = function () {
// 改行コードは br タグに変換してくれる
// IE11, Chrome, Edge で確認
result.innerText = reader.result;
}
// ファイル読み込みを実行
reader.readAsText(fileData, 'Shift_JIS');
}
file.addEventListener('change', loadLocalCsv, false);
} else {
file.style.display = 'none';
result.innerHTML = 'File APIに対応したブラウザでご確認ください';
}
// 不要なのでコメントアウト
//function createTable(data) {
// var table = document.createElement('table');
// for (var i = 0; i < data.length; i++) {
// var tr = document.createElement('tr');
// for (var j = 0; j < data[i].length; j++) {
// var td = document.createElement('td');
// td.innerText = data[i][j];
// tr.appendChild(td);
// }
// table.appendChild(tr);
// }
// return table;
//}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<h1>CSV</h1>
<input type="file" name="file" id="file"/>
<div id="result"></div>
</form>
</body>
</html>
結果の画像は Teratail のスレッドの方にアップしておきます。
|
|