0

HTML, CSS, javascriptで、あるシステムを作成しています。

CSV出力はできるのですが、出力が成功した際に "出力成功しました" とメッセージを出したいです。

また、この画面遷移した際に出力ボタンを押していないのに "失敗しました" とでてきてしまいます。
なので出力ボタンを押してメッセージを出したいです。

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

HTML

<!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" class="input"><br></td></tr>
        <tr><td>email<br></td></tr>
        <tr><td><input type="text" name="email" id="email" class="input"><br></td></tr>
        <tr><td>出力先<br></td></tr>
        <tr><td><input type="text" name="messege" id="messege" class="input"><br><br></td></tr>

        <input type="button" id="download" value="CSV出力">
      
      </table>
      </form>


      <script src="index.js"></script>
  </body>
</html>

JavaScript

function downloadCSV() {
    //ダウンロードするCSVファイル名を指定する
    const filename = "download.csv";
    //CSVデータ
    const inputs = $('.input').map((_, element) => {
        return element.value;
    }).get().join(',');

    //BOMを付与する(Excelでの文字化け対策)
    const bom = new Uint8Array([0xef, 0xbb, 0xbf]);
    //Blobでデータを作成する
    const blob = new Blob([bom, inputs], { 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);

fetch()
    .then(res => {
        console.log(res.status);  //確認用
        if (!res.ok) {
            throw new Error('fail');
        }
            return res.text();  //json
        })
    .then(data => {
        // 送信完了
        _showAlert('出力に成功しました。');
            console.log(data);
        })
    .catch(error => {
        _showAlert('出力に失敗しました。');
        console.error();
    });     
0

1 件の回答 1

0

そのfetch()URLを指定していないので、絶対エラーしてcatchのブロックへ飛んでいきます。多分fetch()を使うつもりはないと思います。Fetch の使用 
実際ここにfetch()は無関係です。単純にdownloadCSV()の最後で_showAlert()をコールして大丈夫です。けど、失敗の条件は知らないので、ただのtry...catchにしてみます。

function downloadCSV()
{
    try
    {
        //ダウンロードするCSVファイル名を指定する
        const filename = "download.csv";
        //CSVデータ
        const inputs = $('.input').map((_, element) =>
        {
            return element.value;
        }).get().join(',');

        //BOMを付与する(Excelでの文字化け対策)
        const bom = new Uint8Array([0xef, 0xbb, 0xbf]);
        //Blobでデータを作成する
        const blob = new Blob([bom, inputs], { 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);
        }
        _showAlert('出力に成功しました。');
    }
    catch (err)
    {
        _showAlert('出力に失敗しました。');
    }
}

//ボタンを取得する
const download = document.getElementById("download");
//ボタンがクリックされたら「downloadCSV」を実行する
download.addEventListener("click", downloadCSV, false);
1
  • ご回答ありがとうございます。色々触っていたら自己解決できました。コメントしていただきありがとうございました。
    – akki
    2021年10月27日 6:20

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。