hrendoh/madotsuki-envelope-mini.html

## madotsuki-envelope-mini.html
<!doctype html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>窓付封筒あて名印刷 簡易版</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <style>
    /* Googleフォントの読み込み */
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

    body {
      font-family: 'Noto Sans JP', sans-serif;
    }

    /* canvasは、解像度の半分の大きさで表示 */
    canvas {
      border: 1px solid #ccc;
      width: 595px;
      height: 842px;
    }

    @media print {
      @page {
        size: A4 portrait;
        margin: 0;
      }

      * {
        margin: 0 !important;
        padding: 0 !important;
      }

      /* canvas以外は非表示にする */
      h1,
      .form-container {
        display: none;
      }

      /* canvasの縦横幅を合わせる */
      canvas {
        border: none !important;
        width: 1190px !important;
        height: 1670px !important;
      }
    }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>
  <script>
    const CANVAS_WITDH = 1190;
    const CANVAS_HEIGHT = 1670;
    function preview() {
      const canvas = document.querySelector('canvas');
      const ctx = canvas.getContext("2d");
      ctx.clearRect(0, 0, CANVAS_WITDH, CANVAS_HEIGHT);
      ctx.fillStyle = "black";
      // Googleフォントを指定
      ctx.font = "24px 'Noto Sans JP', sans-serif";
      ctx.textAlign = "left";
      const textarea = document.querySelector('textarea');
      // textareaの改行をそのまま出力
      const rows = textarea.value.split("\n");
      rows.forEach((row, i) => {
        ctx.fillText(row, 170, 100 + 32 * i, 440);
      });
    }
    function download() {
      const canvas = document.querySelector('canvas');
      const imgData = canvas.toDataURL("image/png");
      const doc = new jsPDF("p", "mm", "a4");
      const width = doc.internal.pageSize.getWidth();
      const height = doc.internal.pageSize.getHeight();
      // A4サイズいっぱいに画像を貼り付ける
      doc.addImage(imgData, "PNG", 0, 0, width, height);
      doc.save("address-print.pdf");
    }
    window.onload = () => {
      const canvas = document.querySelector('canvas');
      canvas.width = CANVAS_WITDH;
      canvas.height = CANVAS_HEIGHT;
      // 初期値でプレビュー
      preview();
    }
  </script>
</head>

<body>
  <div class="container">

    <h1>窓付封筒あて名印刷 簡易版</h1>

    <div class="form-container">
      <div class="form-group">
        <textarea class="form-control" rows="5" onchange="preview();">
163-8001
東京都新宿区西新宿２丁目８−１
鈴木ビル ４F
株式会社ABCデザイン
      </textarea>
      </div>
      <button class="btn btn-primary mb-2" onclick="window.print();">印刷</button>
      <button class="btn btn-primary mb-2" onclick="download();">ダウンロード</button>
    </div>
    <div class="preview-container">
      <canvas></canvas>
    </div>
  </div>

</body>

</html>
	<!doctype html>
	<html lang="ja">

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<title>窓付封筒あて名印刷簡易版</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
	integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<style>
	/* Googleフォントの読み込み */
	@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

	body {
	font-family: 'Noto Sans JP', sans-serif;
	}

	/* canvasは、解像度の半分の大きさで表示 */
	canvas {
	border: 1px solid #ccc;
	width: 595px;
	height: 842px;
	}

	@media print {
	@page {
	size: A4 portrait;
	margin: 0;
	}

	* {
	margin: 0 !important;
	padding: 0 !important;
	}

	/* canvas以外は非表示にする */
	h1,
	.form-container {
	display: none;
	}

	/* canvasの縦横幅を合わせる */
	canvas {
	border: none !important;
	width: 1190px !important;
	height: 1670px !important;
	}
	}
	</style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>
	<script>
	const CANVAS_WITDH = 1190;
	const CANVAS_HEIGHT = 1670;
	function preview() {
	const canvas = document.querySelector('canvas');
	const ctx = canvas.getContext("2d");
	ctx.clearRect(0, 0, CANVAS_WITDH, CANVAS_HEIGHT);
	ctx.fillStyle = "black";
	// Googleフォントを指定
	ctx.font = "24px 'Noto Sans JP', sans-serif";
	ctx.textAlign = "left";
	const textarea = document.querySelector('textarea');
	// textareaの改行をそのまま出力
	const rows = textarea.value.split("\n");
	rows.forEach((row, i) => {
	ctx.fillText(row, 170, 100 + 32 * i, 440);
	});
	}
	function download() {
	const canvas = document.querySelector('canvas');
	const imgData = canvas.toDataURL("image/png");
	const doc = new jsPDF("p", "mm", "a4");
	const width = doc.internal.pageSize.getWidth();
	const height = doc.internal.pageSize.getHeight();
	// A4サイズいっぱいに画像を貼り付ける
	doc.addImage(imgData, "PNG", 0, 0, width, height);
	doc.save("address-print.pdf");
	}
	window.onload = () => {
	const canvas = document.querySelector('canvas');
	canvas.width = CANVAS_WITDH;
	canvas.height = CANVAS_HEIGHT;
	// 初期値でプレビュー
	preview();
	}
	</script>
	</head>

	<body>
	<div class="container">

	<h1>窓付封筒あて名印刷簡易版</h1>

	<div class="form-container">
	<div class="form-group">
	<textarea class="form-control" rows="5" onchange="preview();">
	163-8001
	東京都新宿区西新宿２丁目８−１
	鈴木ビル４F
	株式会社ABCデザイン
	</textarea>
	</div>
	<button class="btn btn-primary mb-2" onclick="window.print();">印刷</button>
	<button class="btn btn-primary mb-2" onclick="download();">ダウンロード</button>
	</div>
	<div class="preview-container">
	<canvas></canvas>
	</div>
	</div>

	</body>

	</html>