忍者ブログ
[401]  [400]  [399]  [398]  [397]  [396]  [394]  [393]  [392]  [391]  [390
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

php htmlを印刷

印刷に挑戦
1.cssに記載
@charset "utf-8";
/* CSS Document */
.print_pages{
/*A4縦*/
width: 172mm;
height: 251mm;
page-break-after: always;
position: relative;
counter-increment: page_count;
/*
print_pagesのpositionをrelative
A4縦172mmx251mm
A4横251mmxheight172mm
*/
}
/*最後のページは改ページを入れない*/
.print_pages:last-child{
page-break-after: auto;
}
.PrintButton{
display : none;
}

2.linkの組み込み
 <link media="print" rel="stylesheet" href="print.css">
media="print"で装置がプリンターの時のみ有効


3.印刷の組み込み

<input type=button name=print value="印刷"  class="PrintButton" onClick="javascript:window.print()">
または
<input type="button" value="印刷" class="PrintButton" onclick="window.print();" />
<article>
<section class="print_pages">
  ページ
</section> 
<section class="print_pages">
  ページ
</section> 
<section class="print_pages">
  ページ
</section> 
</article>

3.印刷画面が起動される
class="PrintButton" はこのボタンが印刷されない

4.ヘッダーとフッター
.print_pages:before{
position: absolute;
right: 0;
top: 0;
content: "テスト文字";
}
.print_pages:after{
position: absolute;
right: 0;
bottom: 0;
content: counter(page_count) "ページ";
}

5.ハードコピーでいいなら
CSSの読み込みもなしsection もなしで印刷プレビュー画面が起動する





拍手

PR
カレンダー
03 2025/04 05
S M T W T F S
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
フリーエリア
最新CM
[03/10 DORA]
最新TB
プロフィール
HN:
dorabu
性別:
非公開
バーコード
ブログ内検索
P R
Copyright © ドラブーのアンドロイドとIoTなブログ All rights reserved. / Template by 四季. / Material by てんせん.

忍者ブログ [PR]