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();
});