83283


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

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

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

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

**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" 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>
    
[/code]

**JavaScript**

[code]

    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();
        });     
    
[/code]


CC BY-SA 4.0
2021-10-26T03:18:18.320
83263
2021-10-27T06:22:56.850
2021-10-27T06:22:56.850
48651
48651
question
javascript html
CSV出力に成功したらメッセージを出したい


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

[code]

    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);
    
[/code]


CC BY-SA 4.0
2021-10-27T05:35:11.917
83283
2021-10-27T05:35:11.917
40660
83263
answer