CSVファイルをそのままブラウザに表示したい

前提・実現したいこと

外部にあるCSVファイルを取得してブラウザに表示したいです。
下記、イメージ画面です。とあるURLを参考にしました。
縦になってしまうので分割して横に表示しています。
本来ならば上下で表示されています。

画像の用にCSVの中身をそのままテキストでブラウザに表示したいと考えております。

該当のソースコード

Html
1    <input type="file" name="file" id="file"/>
2    <div id="result"></div>

Javascript
1$(function () {
2    var file = document.getElementById('file');
3    var result = document.getElementById('result');
4
5    // File APIに対応しているか確認
6    if (window.File && window.FileReader && window.FileList && window.Blob) {
7        function loadLocalCsv(e) {
8            // ファイル情報を取得
9            var fileData = e.target.files[0];
10            console.log(fileData); // 取得した内容の確認用
11
12            // CSVファイル以外は処理を止める
13            if (!fileData.name.match('.csv$')) {
14                alert('CSVファイルを選択してください');
15                return;
16            }
17
18            // FileReaderオブジェクトを使ってファイル読み込み
19            var reader = new FileReader();
20            // ファイル読み込みに成功したときの処理
21            reader.onload = function () {
22                var cols = reader.result.split('\n');
23                var data = [];
24                for (var i = 0; i < cols.length; i++) {
25                    data[i] = cols[i].split(',');
26                }
27                var insert = createTable(data);
28                result.appendChild(insert);
29            }
30            // ファイル読み込みを実行
31            reader.readAsText(fileData, 'Shift_JIS');
32        }
33        file.addEventListener('change', loadLocalCsv, false);
34
35    } else {
36        file.style.display = 'none';
37        result.innerHTML = 'File APIに対応したブラウザでご確認ください';
38    }
39
40    function createTable(data) {
41        var table = document.createElement('table');
42        for (var i = 0; i < data.length; i++) {
43            var tr = document.createElement('tr');
44            for (var j = 0; j < data[i].length; j++) {
45                var td = document.createElement('td');
46                td.innerText = data[i][j];
47                tr.appendChild(td);
48            }
49            table.appendChild(tr);
50        }
51        return table;
52    }
53});

試したこと

現在、CSVファイルを取得してブラウザに表示するところまではできています。
ですが、このよう形で画面に表示されています。

これをイメージ画像のようにCSVの中身をテキストでブラウザに表示するにはどのようにしたら良いでしょうか？

補足情報（FW/ツールのバージョンなど）

Microsoft Visual Studio2010
.NET Framework4

追記：解決できなかったため
http://bbs.wankuma.com/index.cgi?mode=al2&namber=98029
でも質問させていただきました。

coco_bauer

2021/08/26 09:30

質問の画像は、CSVファイルの内容をテキストで表示したものになっているように思います。「ですが、このよう形で画面に表示されています」と書かれているということは、表示に不満な点があるのだと思うのですが、具体的に何が不満なのか（どのように表示したいのか）が書かれていないので回答しかねます。

aika

2021/08/26 23:42

coco_bauerさんすみません、ブラウザに表示したいという表現が好ましくなかったかもしれません。画像を見ていただくと、デバッカーのコード(HTMLとCSV)の表示(ファイル形式？)が違うので、デバッカーでコードを表示した際に、CSVになるようにしたいということです。

退会済みユーザー

2021/09/04 05:36

質問者さん、無言ですが、回答したのでそれに対するフィードバックを書きましょう。役に立った/立たなかったぐらいはすぐ返せるはず。役に立たなかったなら、どこがダメだったかを書くと、より質問者さんが期待する答えに近いものが出てくるかも。とにかく無言で放置は NG です。

行動規範の内容に同意します

回答2件

質問の一番上の画像のように、CSV ファイルから取得したコンマ区切りのままの文字列を各行で改行してブラウザに表示したいということのようですね。

で、どこかネットで見たスクリプトをコピペして使ってみたが、table, tr, td 要素の中に配置されてしまい、期待する結果とならない。スクリプトを自力で書き直せるスキルがあれば対処できるが、そのスキルがないので質問したと想像してます。

であれば、FileReader.result で取得したファイルの内容を、余計な加工はしないで、表示する div 要素の innerText にそのまま代入してやるだけでやりたいことはできるはずです。

検証のため、質問のスクリプトをコピペして、以下のように部分を以下のように削除・書き換えてみました。

<!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>

結果の画像は以下の通りです。