記事詳細

投稿日

2026年05月13日05時55分

タイトル

ASP.net(10.) Core MVC: VisualStudio開発：Viewの表示を「印刷」ボタンで印刷するプログラムのサンプルはありますか？

内容

はい、ASP.NET Core 10.0 MVC で「印刷」ボタンを押すと現在表示中の View を印刷するサンプルは、比較的シンプルに実装できます。
サーバー側で特別な処理をせず、クライアント側（JavaScript）で window.print() を呼び出すのが一般的です。

サンプル構成

Controller: 通常の View を返すだけ
View (.cshtml): HTML と「印刷」ボタン、JavaScript を記述

1. Controller

Csharp
using Microsoft.AspNetCore.Mvc;

namespace MyApp.Controllers
{
    public class ReportController : Controller
    {
        public IActionResult Index()
        {
            // 必要に応じてモデルを渡す
            return View();
        }
    }
}

2. View (Views/Report/Index.cshtml)

Cshtml
@{
    ViewData["Title"] = "レポート表示";
}

<h2>@ViewData["Title"]</h2>

<div id="printArea">
    <p>ここに印刷したい内容を表示します。</p>
    <table border="1">
        <tr><th>項目</th><th>値</th></tr>
        <tr><td>日付</td><td>@DateTime.Now.ToString("yyyy/MM/dd")</td></tr>
        <tr><td>担当者</td><td>山田太郎</td></tr>
    </table>
</div>

<button onclick="printPage()">印刷</button>

@section Scripts {
    <script>
        function printPage() {
            // ページ全体を印刷
            window.print();
            
            // もし特定の領域だけ印刷したい場合は以下のようにする
            /*
            var printContents = document.getElementById('printArea').innerHTML;
            var originalContents = document.body.innerHTML;
            document.body.innerHTML = printContents;
            window.print();
            document.body.innerHTML = originalContents;
            */
        }
    </script>
}

3. ポイント

window.print() はブラウザの印刷ダイアログを開く標準的な方法です。
特定の領域だけ印刷したい場合は、一時的に document.body.innerHTML を差し替える方法が使えます。
印刷用のレイアウトを整えるには 印刷用 CSS (@media print) を使うと便利です。

もしご希望なら、このサンプルに 印刷専用のCSS を追加して、ボタンや不要な要素を印刷時に非表示にするバージョンも作れます。
そうすると、見た目がレポート用に最適化されます。

作りますか？

添付画像

画像はありません

Genreのカテゴリ-名

Views

編集 | 記事一覧