83247


JavaScriptからCSV出力を行いたいのですが、作業中にエラーが出てしまいました。  
（下記に記載）

私では力不足なので皆様にお力添えいただきたいです。よろしくお願いします。

**参考にしたサイト**  
[【JavaScript】CSVのダウンロード機能を実装する！Excelの日本語文字化け対応](https://into-the-
program.com/javascript-download-csv/)  
[jQueryで複数のinputからそれぞれのvalueを取得する。](https://qiita.com/Yuji-207/items/cf1da4ba3eb35cb308f8)

**エラー内容**

[code]

    index.js:97 Uncaught ReferenceError: data is not defined
        at HTMLInputElement.downloadCSV (index.js:97)
    
[/code]

[![画像の説明をここに入力](https://i.stack.imgur.com/PrVIZ.png)](https://i.stack.imgur.com/PrVIZ.png)

[![画像の説明をここに入力](https://i.stack.imgur.com/NyOkZ.png)](https://i.stack.imgur.com/NyOkZ.png)

[![画像の説明をここに入力](https://i.stack.imgur.com/ui6dt.png)](https://i.stack.imgur.com/ui6dt.png)

**JavaScript**

[code]

    function downloadCSV() {
      //ダウンロードするCSVファイル名を指定する
      const filename = "download.csv";
      //CSVデータ
      const inputs = $('.input').each(function(index, element){
        return element.value;
    });
      
      //BOMを付与する（Excelでの文字化け対策）
      const bom = new Uint8Array([0xef, 0xbb, 0xbf]);
      //Blobでデータを作成する
    //エラー
      const blob = new Blob([bom, data], { type: "text/csv" });
    
      //IE10/11用
      //download属性が機能しないためmsSaveBlobを使用する
      if (window.navigator.msSaveBlob) {
          window.navigator.msSaveBlob(blob, filename);
    
          //その他ブラウザ
      } else {
          //BlobからURLを作成する
          const url = (window.URL || window.webkitURL).createObjectURL(blob);
          //ダウンロード用にリンクを作成する
          const download = document.createElement("a");
          //リンク先に上記で生成したURLを指定する
          download.href = url;
          //download属性にファイル名を指定する
          download.download = filename;
          //作成したリンクをクリックしてダウンロードを実行する
          download.click();
          //createObjectURLで作成したURLを開放する
          (window.URL || window.webkitURL).revokeObjectURL(url);
      }
    }
    
    //ボタンを取得する
    const download = document.getElementById("download");
    //ボタンがクリックされたら「downloadCSV」を実行する
    download.addEventListener("click", downloadCSV, false);
    
[/code]

**HTML**

[code]

    <!DOCTYPE html>
    <html lang="ja" dir="ltr">
      <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="index.css">
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
      </head>
    
    
      <body><br><br><br><br>
    
    
    <div id="container"></div>
    <table align="center">
    
            <tr><td>名前<br></td></tr>
            <tr><td><input type="text" name="name" id="name"><br></td></tr>
            <tr><td>email<br></td></tr>
            <tr><td><input type="text" name="email" id="email"><br></td></tr>
            <tr><td>出力先<br></td></tr>
            <tr><td><input type="text" name="messege" id="messege"><br><br></td></tr>
    
            <input type="button" id="download" value="CSV出力">
          
          </table>
          </form>
    
    
          <script src="index.js"></script>
      </body>
    </html>
    
[/code]

**CSS**

[code]

    html {
        text-align: center;
    }
    
[/code]


CC BY-SA 4.0
2021-10-25T07:04:39.360
83245
2021-10-25T13:03:05.923
2021-10-25T11:32:32.617
3060
48651
question
javascript
CSV出力時の入力フォームの値の取得方法


> index.js:97 Uncaught ReferenceError: data is not defined at
> HTMLInputElement.downloadCSV (index.js:97)

ここは `data` ではなく `inputs` ではないでしょうか。

[code]

      //エラー
      const blob = new Blob([bom, inputs], { type: "text/csv" });
    
[/code]

また、入力された文字列を CSV 形式にするので `each` ではなく `map` を使う方がよいかと思います。

[code]

      //CSVデータ
      const inputs = $('input[type=text]').map((_, element) => {
        return element.value;
      }).get().join(',');
    
[/code]

**追記**

> 入力フォームの内容ではなく謎の文字がでてしまいました。。

こちらの環境は以下の通りですが、文字化けは起きていません。

  * Windows 10 Home 20H2 19042.868
  * Google Chrome 95.0.4638.54
  * Excel 2016 MSO(version 2019 build 16.0.14430.20154)

[![screenshot](https://i.stack.imgur.com/LxNT8.png)](https://i.stack.imgur.com/LxNT8.png)


CC BY-SA 4.0
2021-10-25T07:43:01.330
83247
2021-10-25T13:03:05.923
2021-10-25T13:03:05.923
47127
47127
83245
answer