[解決済み] JavaScriptの配列情報をcsvにエクスポートする方法(クライアント側)?
2022-03-15 13:38:12
質問
この種の質問はたくさんあると思いますが、私はJavaScriptを使ってこれを行う必要があります。私は
Dojo 1.8
で、すべての属性情報を配列で持っていて、以下のような感じです。
[["name1", "city_name1", ...]["name2", "city_name2", ...]]
これをどのように
CSV
をクライアント側で使用することはできますか?
どのように解決するのですか?
これはネイティブのJavaScriptでできます。このように、データを正しいCSV形式にパースする必要があります(質問で説明したように、データに配列の配列を使用していると仮定します)。
const rows = [
["name1", "city1", "some other info"],
["name2", "city2", "more info"]
];
let csvContent = "data:text/csv;charset=utf-8,";
rows.forEach(function(rowArray) {
let row = rowArray.join(",");
csvContent += row + "\r\n";
});
またはもっと短い方法 矢印機能 ):
const rows = [
["name1", "city1", "some other info"],
["name2", "city2", "more info"]
];
let csvContent = "data:text/csv;charset=utf-8,"
+ rows.map(e => e.join(",")).join("\n");
そうすると、JavaScriptの
window.open
と
encodeURI
関数を使って、このように CSV ファイルをダウンロードすることができます。
var encodedUri = encodeURI(csvContent);
window.open(encodedUri);
編集する
ファイルに特定の名前を付けたい場合は、少し異なる方法を取る必要があります。window.open
メソッドを使用します。これを実現するためには、隠しメソッドである
<a>
DOMノードを作成し、その
download
属性を次のように設定します。
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "my_data.csv");
document.body.appendChild(link); // Required for FF
link.click(); // This will download the data file named "my_data.csv".
関連
-
vueにおけるv-forループオブジェクトのプロパティ
-
vueにおけるfilterの適用シーンについて解説します。
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptでメールアドレスを検証するのに最適な方法は何ですか?
-
[解決済み] JavaScript で配列に値が含まれているかどうかを確認するにはどうすればよいですか?
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み] JavaScriptで配列の先頭に新しい配列要素を追加するにはどうすればよいですか?
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
vueネットワークリクエストソリューション ネイティブネットワークリクエストとjsネットワークリクエストライブラリ
-
jsを使った簡単な照明スイッチのコード
-
vue for 登録ページ効果 vue for sms 認証コードログイン
-
vueのグローバルがscss(mixin)を導入。
-
Vueのイベント処理とイベントモディファイアの解説
-
Vueのフォームイベントのデータバインディングの説明
-
[解決済み】ExpressJS : res.redirect()が期待通りに動かない?
-
モジュールのビルドに失敗しました。Error: ENOENT: no such file or directory, scandir 'D:\.... \node_modules
-
OSSアップロードエラーを解決する: net::ERR_SSL_PROTOCOL_ERROR
-
[解決済み】リンクのないJavaScriptのblobファイル名