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制作会社様向け業務案内、一般企業様向け業務案内もご覧くださいね。
Clipboard APIの落とし穴：localhost・HTTPS・ユーザー操作の違い
2026.09.16
navigator.clipboard.writeText()によるクリップボードへの自動コピーが、localhostでは動くのにLAN内IPのHTTPアクセスでは失敗する理由を、Secure Context、ユーザー操作、ブラウザ権限の観点から整理します。HTTPS化の考え方、JavaScriptによる確認方法、失敗時に手動コピーへ切り替える実装例、document.execCommand('copy')を使う場合の注意点も紹介します。
自動取得後の大量データ確認を一日半から2時間に短縮した、ワークキュー型UIの設計
2026.09.12
自動取得後の大量データの確認・補正作業を題材に、管理画面をワークキュー型UIへ改善した事例を紹介します。少数件のキュー、自動補充、解決済み項目の非入力化、例外の別レーン化、unknown_resultや楽観的ロックなど、人間が大量データを安全かつ効率的に処理するための設計をまとめます。
ViteのJavaScriptチャンクサイズ警告が出たときの判断基準：コード分割・閾値変更・現状維持
2026.09.08
ViteのビルドでJavaScriptチャンクサイズ警告が出たときに、ビルドエラーとの違い、非圧縮サイズとgzipサイズの見方、静的importによるチャンク肥大化の原因を整理する。動的importや依存ライブラリの見直し、警告閾値の変更、現状維持について、一般ユーザー向けサービス・社内管理画面・自分専用の管理画面ごとの判断基準と本番運用上の注意点を紹介する。
Vue.jsで一覧画面の無限スクロールを実装する：サンプルJSONから一覧データを取得
2026.09.03
Vue.js単体のViteプロジェクトで、サンプルJSONからデータを取得し、IntersectionObserverで画面下部の監視要素を検知して5件ずつカード表示する無限スクロールを実装します。fetchのエラー処理や再読み込み、全件表示後の監視解除も扱い、サンプルJSONを一括取得するモックと、実際のAPIによるページングの違いも説明します。