質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
CSV

CSV(Comma-Separated Values)はコンマで区切られた明白なテキスト値のリストです。もしくは、そのフォーマットでひとつ以上のリストを含むファイルを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

受付中

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

aika
aika

総合スコア0

CSV

CSV(Comma-Separated Values)はコンマで区切られた明白なテキスト値のリストです。もしくは、そのフォーマットでひとつ以上のリストを含むファイルを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

2回答

0評価

0クリップ

104閲覧

投稿2021/08/26 08:29

編集2022/01/12 10:55

前提・実現したいこと

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

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

該当のソースコード

Html

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

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.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; } });

試したこと

現在、CSVファイルを取得してブラウザに表示するところまではできています。
ですが、このよう形で画面に表示されています。
イメージ説明
これをイメージ画像のようにCSVの中身をテキストでブラウザに表示するにはどのようにしたら良いでしょうか?

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

Microsoft Visual Studio2010
.NET Framework4

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

coco_bauer
coco_bauer

2021/08/26 09:30

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

2021/08/26 23:42

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

2021/09/04 05:36

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

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSV

CSV(Comma-Separated Values)はコンマで区切られた明白なテキスト値のリストです。もしくは、そのフォーマットでひとつ以上のリストを含むファイルを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。