JavaScriptでWebページに印刷ボタンを追加する方法
作成日:2009.11.18
Webページに印刷ボタンを追加したい場合、JavaScriptを使って簡単に印刷機能を実装できます。本記事では、window.print()を使用した印刷ボタンの作成方法を説明し、実際にボタンを表示させるコードを紹介します。
error この記事は最終更新日から16年以上が経過しています。
ブラウザで表示しているページの印刷は、JavaScipt の、
window.print();で行なえます。
なので、サイト上に印刷ボタンを設置したければ、
<form method="get" action="#">
<input type="button" value="印刷する"
onclick="window.print();" />
</form>とでも書いておけば以下のようなボタンが表示されます。
奈良市を拠点に、27年以上の経験を持つフリーランスWebエンジニア、阿部辰也です。
これまで、ECサイトのバックエンド開発や業務効率化システム、公共施設の予約システムなど、多彩なプロジェクトを手がけ、企業様や制作会社様のパートナーとして信頼を築いてまいりました。
【制作会社・企業様向けサポート】
Webシステムの開発やサイト改善でお困りの際は、どうぞお気軽にご相談ください。小さな疑問から大規模プロジェクトまで、最適なご提案を心を込めてさせていただきます。
ぜひ、プロフィールやWeb制作会社様向け業務案内、一般企業様向け業務案内もご覧くださいね。
Vue.jsで一覧画面の無限スクロールを実装する：サンプルJSONから一覧データを取得
2026.09.03
Vue.js単体のViteプロジェクトで、サンプルJSONからデータを取得し、IntersectionObserverで画面下部の監視要素を検知して5件ずつカード表示する無限スクロールを実装します。fetchのエラー処理や再読み込み、全件表示後の監視解除も扱い、サンプルJSONを一括取得するモックと、実際のAPIによるページングの違いも説明します。
Laravel 13＋Vue.jsで画像・CSVを非同期アップロードする：FormData・ファイル検証・非公開保存
2026.08.31
Laravel 13のBladeに組み込んだVue.jsから、FormDataを使って画像またはCSVを非同期で送信する方法を解説します。JPEG・PNGの画像検証、CSVの文字コード変換と簡易的な内容確認、20MBのサイズ制限、非公開ディスクへの保存、CSRF・バリデーションエラー処理を実装し、fetchを基本にaxiosとの違いも整理します。
Laravel 13＋Vue.jsで登録・編集フォームを非同期化する：fetchとaxiosを比較
2026.08.26
Laravel 13のBlade画面にVue.jsを組み込み、membersテーブルのnameとemailを登録・編集するフォームを作ります。Vue.jsからLaravelのWebルートへJSONを送信し、CSRFトークン、バリデーションエラー、送信中・通信失敗の状態を扱います。リクエスト送信にはfetchとaxiosを使う方法を比較し、追加パッケージの有無やエラー処理の違いを整理します。
CodeIgniter 4のViewにVue.jsを組み込む
2026.08.20
CodeIgniter 4のView全体はサーバー側で描画したまま、一部分だけVue.jsを組み込む方法を解説します。Viteの開発サーバーからJavaScriptを読み込む方法、本番ビルドしたアセットをmanifestから取得してApacheで配信する方法、ControllerからViewへ渡したデータをVue.jsで検索する方法を確認します。