CSV書き込み

2023-08-212024-10-22

↓↓↓ スライドできます ↓↓↓

[metaslider id=”2333″]

Webページ上でテキストデータを入力し、それをCSVファイルとしてダウンロードできるシンプルなウェブアプリケーションの例です。以下に、HTMLとJavaScriptのコードの内容を説明します。

<!DOCTYPE html>: HTML5の文書タイプを指定します。
<html>: HTML文書の開始を示します。
<head>: ページのヘッダー情報を含むセクションです。ここではページのタイトルを指定しています。
<body>: ページの実際のコンテンツを含むセクションです。
<h2>: “Enter Data” という見出しを表示します。
<textarea>: テキスト入力エリアを表示します。ユーザーはここにテキストデータを入力できます。id 属性が “dataInput” であり、4行×50列のサイズを持っています。プレースホルダー（placeholder）として “Enter data here…” というテキストが表示されます。
<button>: “Download CSV” というテキストを持つボタンを表示します。このボタンをクリックすると、入力されたデータをCSVファイルとしてダウンロードします。
<script src="script.js"></script>: 外部のJavaScriptファイル “script.js” を読み込みます。このファイルにはアプリケーションのロジックが含まれています。

document.addEventListener("DOMContentLoaded", function() { ... });: ページが読み込まれたときに指定された関数を実行するイベントリスナーを設定します。この関数内にアプリケーションの主要なロジックが含まれています。
var dataInput = document.getElementById("dataInput");: ページ内のテキスト入力エリア（id=”dataInput”）の要素を取得します。
var downloadButton = document.getElementById("downloadButton");: ページ内のダウンロードボタン（id=”downloadButton”）の要素を取得します。
downloadButton.addEventListener("click", function() { ... });: ダウンロードボタンがクリックされたときに実行する関数を設定します。
var data = dataInput.value;: テキスト入力エリアからユーザーが入力したデータを取得します。
var csvContent = "data:text/csv;charset=utf-8,\uFEFF" + encodeURIComponent(data);: データをCSVファイルとしてエンコードします。このエンコードされたデータをURL形式で保持します。\uFEFF は、BOM（バイトオーダーマーク）で、CSVファイル内で文字化けを防ぐために追加されています。
var link = document.createElement("a");: ダウンロード用のリンク要素（<a>）を動的に作成します。
link.setAttribute("href", csvContent);: リンクのhref属性にCSVデータを指定します。
link.setAttribute("download", "data.csv");: リンクのdownload属性にダウンロード時のファイル名 “data.csv” を指定します。
link.click();: リンクをクリックして、CSVファイルのダウンロードが開始されます。

CopyCode


    <!DOCTYPE html>

    <html>

    <head>

        <title>CSV File Writing Example</title>

    </head>

    <body>

        <div>

            <h2>Enter Data</h2>

            <textarea id="dataInput" rows="4" cols="50" placeholder="Enter data here..."></textarea>
            
        </div>
    
        <button id="downloadButton">Download CSV</button>
    
        <script src="script.js"></script>
    </body>

    </html>


　（今回は空ファイルです。）


    document.addEventListener("DOMContentLoaded", function() {

        var dataInput = document.getElementById("dataInput");

        var downloadButton = document.getElementById("downloadButton");
    
        downloadButton.addEventListener("click", function() {

            var data = dataInput.value;

            var csvContent = "data:text/csv;charset=utf-8,\uFEFF" + encodeURIComponent(data);

            var link = document.createElement("a");

            link.setAttribute("href", csvContent);

            link.setAttribute("download", "data.csv");

            link.click();
            
        });
    });

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

CSV書き込み

関連記事