C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

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

[トピック内 15 記事 (1 - 15 表示)]  << 0 >>

■98029 / inTopicNo.1)  CSVファイルの内容をそのままブラウザに表示したい
  
□投稿者/ AK (1回)-(2021/08/31(Tue) 11:43:13)

分類:[ASP.NET (VB)] 

こちらで質問させて頂いたのですが、解決できなかったため
再度質問させて頂きます。
https://teratail.com/questions/356280

※IEで動作確認しております。

CSVファイルを読み込んで、その内容をそのままブラウザに表示したいと考えております。
(CSVファイルをブラウザに直接ドロップダウンして表示したのと同じようにしたいです。)

現状、CSVファイルを取得して画面に内容は表示できているのですが
本来やりたいことが出来ていない状況です。

いくら検索しても思うようなものが見つからず大変困っております。
ぜひ、教えていただけないでしょうか?

開発環境はASP.NETです。
.NetFremework4 を使用しております。

Microsoft Visual Studio 2010

引用返信 編集キー/
■98030 / inTopicNo.2)  Re[1]: CSVファイルの内容をそのままブラウザに表示したい
□投稿者/ WebSurfer (2335回)-(2021/08/31(Tue) 12:23:38)
No98029 (AK さん) に返信
> こちらで質問させて頂いたのですが、解決できなかったため
> 再度質問させて頂きます。
> https://teratail.com/questions/356280

マルチポストになるので、Teratail のルール https://teratail.com/help#posted-otherservice に従って
その旨そのスレッドに書いてください。

> 開発環境はASP.NETです。

ASP.NET であれば、サーバーに CSV ファイルをアップロードして、ASP.NET の GridView とか ListView
を使ってそれに CSV のデータを表示する(結果、ブラウザ上では html の table, tr, th, td を使って表
示される)ということができると思いますが、そうしない理由がありますか? あくまで、全てクライアン
ト側で処理したい?

引用返信 編集キー/
■98031 / inTopicNo.3)  Re[2]: CSVファイルの内容をそのままブラウザに表示したい
□投稿者/ AK (2回)-(2021/08/31(Tue) 13:17:17)
No98030 (WebSurfer さん) に返信
> マルチポストになるので、Teratail のルール https://teratail.com/help#posted-otherservice に従って
> その旨そのスレッドに書いてください。

修正いたしました。

> ASP.NET であれば、サーバーに CSV ファイルをアップロードして、ASP.NET の GridView とか ListView
> を使ってそれに CSV のデータを表示する(結果、ブラウザ上では html の table, tr, th, td を使って表
> 示される)ということができると思いますが、そうしない理由がありますか? あくまで、全てクライアン
> ト側で処理したい?

共同制作をしておりまして、私がASP.NETで一部分を担当し、もう一人の方はVBA(メイン)で作成している状況です。
その方に合わせて作成しているため、このような質問をさせて頂きました。

>CSVファイルを読み込んで、その内容をそのままブラウザに表示したいと考えております。
>(CSVファイルをブラウザに直接ドロップダウンして表示したのと同じようにしたいです。)

ができれば、サーバー側でもクライアント側でもどちらでも問題ありません。
ぜひ、教えていただけないでしょうか?

宜しくお願い致します。

引用返信 編集キー/
■98032 / inTopicNo.4)  Re[3]: CSVファイルの内容をそのままブラウザに表示したい
□投稿者/ WebSurfer (2336回)-(2021/08/31(Tue) 13:36:25)
No98031 (AK さん) に返信

> >CSVファイルを読み込んで、その内容をそのままブラウザに表示したいと考えております。
> >(CSVファイルをブラウザに直接ドロップダウンして表示したのと同じようにしたいです。)
>
> ができれば、サーバー側でもクライアント側でもどちらでも問題ありません。

ASP.NET で処理するにはクライアントの PC にある CSV ファイルをサーバーにアップロードする
必要があるのですが、ホントに問題ないのですか?

VBA 担当(ASP.NET で VBA というのが全く解せませんが)の共同制作者に合わせて作成している
とのことですと、問題あると思うのですが。その方及び上司にホントに問題ないか相談・確認して
みてください。

問題あるとすると、回答に無駄な時間と労力を費やすことになるわけで、それは自分としては避け
たいので。
引用返信 編集キー/
■98033 / inTopicNo.5)  Re[4]: CSVファイルの内容をそのままブラウザに表示したい
□投稿者/ AK (3回)-(2021/08/31(Tue) 14:15:58)
No98032 (WebSurfer さん) に返信
> ASP.NET で処理するにはクライアントの PC にある CSV ファイルをサーバーにアップロードする
> 必要があるのですが、ホントに問題ないのですか?
>
> VBA 担当(ASP.NET で VBA というのが全く解せませんが)の共同制作者に合わせて作成している
> とのことですと、問題あると思うのですが。その方及び上司にホントに問題ないか相談・確認して
> みてください。
>
> 問題あるとすると、回答に無駄な時間と労力を費やすことになるわけで、それは自分としては避け
> たいので。

はい、確認したところ問題ないとのことでした。
引用返信 編集キー/
■98034 / inTopicNo.6)  Re[1]: CSVファイルの内容をそのままブラウザに表示したい
□投稿者/ 魔界の仮面弁士 (3169回)-(2021/08/31(Tue) 14:25:10)
No98029 (AK さん) に返信
> CSVファイルを読み込んで、その内容をそのままブラウザに表示したいと考えております。
> (CSVファイルをブラウザに直接ドロップダウンして表示したのと同じようにしたいです。)

ローカル側で読み取るのであれば、FileReader というものがあります。
https://www.html5rocks.com/ja/tutorials/file/dndfiles//
https://catprogram.hatenablog.com/entry/2015/04/23/171157

※IE のサポート状況は確認していません。
引用返信 編集キー/
■98035 / inTopicNo.7)  Re[5]: CSVファイルの内容をそのままブラウザに表示したい
□投稿者/ WebSurfer (2337回)-(2021/08/31(Tue) 15:04:39)
No98033 (AK さん) に返信

> はい、確認したところ問題ないとのことでした。

以下の記事はサーバーにある CSV ファイルを GridView に表示するサンプルですが、この応用でできると思います。

CSV パーサー
http://surferonwww.info/BlogEngine/post/2010/10/28/CSV-parser.aspx

CSV ファイルを DtatTable に取得し、それを GridView のデータソースに設定して表示するようにしています。

CSV ファイルのパースには (1) Jet Provider, (2) A Fast CSV Reader, (3) TextFieldParser の 3 つを使う案が
書かれていますが、TextFieldParser を使のがお勧めです。

紹介した記事では TextFieldParser コンストラクタ (String, Encoding) を使っていますが、それに代えて
TextFieldParser コンストラクタ (Stream, Encoding) を使ってみてください。

FileUpload.FileContent プロパティでアップロードしたファイルを指す Stream オブジェクトを取得できますので、
それを TextFieldParser コンストラクタ (Stream, Encoding) に渡してやれば良さそうです。

引用返信 編集キー/
■98036 / inTopicNo.8)  Re[1]: CSVファイルの内容をそのままブラウザに表示したい
□投稿者/ とっちゃん (737回)-(2021/08/31(Tue) 15:30:17)
No98029 (AK さん) に返信

> 現状、CSVファイルを取得して画面に内容は表示できているのですが
> 本来やりたいことが出来ていない状況です。
>
teratail で記述していた、JavaScript は CSVファイルを読み取る際
行データを','で区切って、それを table の行データ(tr,tdの組み合わせ)として格納しています。

これだと、',' は splitしたときに「データとして消して」しまいます。

テキストデータとして表示したいということなので、
行データを split したりせずそのまま1データとして利用し
各行データでテーブルを作るのではなく、単純に<br/>でつないで
データを作ればいいのでは?

出力イメージとしては、

<div><p>
2020/10...<br/>
...
</p></div>

という感じ。

引用返信 編集キー/
■98037 / inTopicNo.9)  Re[6]: CSVファイルの内容をそのままブラウザに表示したい
□投稿者/ AK (4回)-(2021/08/31(Tue) 15:50:03)
No98035 (WebSurfer さん) に返信
> 以下の記事はサーバーにある CSV ファイルを GridView に表示するサンプルですが、この応用でできると思います。
>
> CSV パーサー
> http://surferonwww.info/BlogEngine/post/2010/10/28/CSV-parser.aspx

ご丁寧にありがとうございます。
早速作業に取り掛かろうと思います。

結果まで、少々お待ちください。

引用返信 編集キー/
■98038 / inTopicNo.10)  Re[2]: CSVファイルの内容をそのままブラウザに表示したい
□投稿者/ AK (5回)-(2021/08/31(Tue) 17:18:50)
No98036 (とっちゃん さん) に返信
> teratail で記述していた、JavaScript は CSVファイルを読み取る際
> 行データを','で区切って、それを table の行データ(tr,tdの組み合わせ)として格納しています。
>
> これだと、',' は splitしたときに「データとして消して」しまいます。
>
> テキストデータとして表示したいということなので、
> 行データを split したりせずそのまま1データとして利用し
> 各行データでテーブルを作るのではなく、単純に<br/>でつないで
> データを作ればいいのでは?
>
> 出力イメージとしては、
>
> <div><p>
> 2020/10...<br/>
> ...
> </p></div>
>
> という感じ。

teratailの質問内容が情報不足でした、すみません。(^^;
最終的にCSVファイルにする予定でしたので、','がないと一つのセルとして表示することが
出来ないと思うのですが、大丈夫なのでしょうか?

引用返信 編集キー/
■98039 / inTopicNo.11)  Re[3]: CSVファイルの内容をそのままブラウザに表示したい
□投稿者/ 古谷 (8回)-(2021/08/31(Tue) 19:13:21)
No98038 (AK さん) に返信

ちょっと何言ってるのかわからないけど

reader.onload = function () {
    var pre = document.createElement('pre');
    pre.appendChild(document.createTextNode(reader.result));
    result.appendChild(pre);
}

これでいんじゃない?

引用返信 編集キー/
■98040 / inTopicNo.12)  Re[3]: CSVファイルの内容をそのままブラウザに表示したい
□投稿者/ WebSurfer (2338回)-(2021/09/01(Wed) 07:50:12)
No98038 (AK さん) に返信

> 最終的にCSVファイルにする予定でしたので、','がないと一つのセルとして表示することが
> 出来ないと思うのですが、大丈夫なのでしょうか?
>

「最終的にCSVファイルにする予定」とはどういうこと?
引用返信 編集キー/
■98041 / inTopicNo.13)  Re[3]: CSVファイルの内容をそのままブラウザに表示したい
□投稿者/ 魔界の仮面弁士 (3170回)-(2021/09/01(Wed) 09:38:28)
2021/09/01(Wed) 09:51:01 編集(投稿者)

No98038 (AK さん) に返信
> 最終的にCSVファイルにする予定でしたので、

出力する CSV の文字コードには何を使いますか?
ASCII でしょうか。UTF-8 でしょうか。UTF-16 でしょうか。Shift_JIS でしょうか。それとも…。


サーバー側で出力するなら、System.Text.Encoding クラスを使うなどして変換できますが、
クライアント側で CSV を読み書きする場合、使用する文字コードによっては
追加の変換ライブラリが必要になる場合があります。

https://computer-technology.hateblo.jp/entry/20150710/p2
https://qiita.com/shmiki/items/e29bd8046820f1c9cfb0
https://qiita.com/fumihiko-hidaka/items/1fb8933072db76214079
引用返信 編集キー/
■98042 / inTopicNo.14)  Re[3]: CSVファイルの内容をそのままブラウザに表示したい
□投稿者/ WebSurfer (2339回)-(2021/09/01(Wed) 10:24:40)
No98038 (AK さん) に返信

> 最終的にCSVファイルにする予定でしたので、','がないと一つのセルとして表示することが
> 出来ないと思うのですが、大丈夫なのでしょうか?

結局どうしたいのですか? ブラウザに表示されたときに html ソースはどのようになっていればいいのか
詳しく書いてください

引用返信 編集キー/
■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 のスレッドの方にアップしておきます。

引用返信 編集キー/

このトピックをツリーで一括表示


トピック内ページ移動 / << 0 >>

このトピックに書きこむ