16
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

HTMLとjavascriptを利用してFormの内容をファイルに出力する方法

Posted at

#HTMLとjavascriptを利用してFormの内容をファイルに出力する方法
##概要
業務でExcelにマクロを実装して入力した内容をファイルの出力するツールを利用することがある。
ただ、Excelのマクロに詳しくない場合はメンテナンスにコストがかかる。
HTMLとJavascriptであれば、有識者が多いため、メンテナンスコストは削減できる。
ここでは、Formの内容をファイルに出力する方法を記載する。
ただし、入力チェックは記載しない。

##プログラム

ファイル出力
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Form内容のファイル出力ツール</title>
	<h1>Form内容のファイル出力ツール</h1>
	<script>
		function dispText() {
			var text = "'" +
				document.formname.a001.value + "','" +
				document.formname.a002.value + "','" +
				document.formname.a003.value + "','" +
				document.formname.a004.value + "','" +
				document.formname.a005.value + "'";
			var blob = new Blob([text], { "type": "text/plain" });

			//IEの場合
			if (window.navigator.msSaveBlob) {
				window.navigator.msSaveBlob(blob, "outFileFromWindows.txt");
				//IE以外の場合
			} else {
				document.getElementById("createFile").href = window.URL.createObjectURL(blob);
			}
		}
	</script>
</head>
<body>
	<form name="formname" id="id_form" action="">
		<label id="001">Form1 : </label>
		<input type="text" name="a001" size="30" maxlenglabel="30" value="">
		</br>
		<label id="002">Form2 : </label>
		<input type="text" name="a002" size="30" maxlenglabel="30" value="">
		</br>
		<label id="003">Form3 : </label>
		<input type="text" name="a003" size="30" maxlenglabel="30" value="">
		</br>
		<label id="004">Form4 : </label>
		<input type="text" name="a004" size="8" maxlenglabel="8" value="">
		</br>
		<label id="005">Form5 : </label>
		<input type="text" name="a005" size="30" maxlenglabel="30" value="">
		</br>

		<a id="createFile" href="#" download="outFile.txt" value="ファイル作成" onclick="dispText()">ファイル作成</a>
	</form>
</body>
</html>

##実行例
左上:ブラウザでの表示結果 左下:作成したファイル 右:プログラム
image.png

16
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?