スクロールの発生するWeb画面を全て印刷したい

Question

やりたい事

Web画面の印刷

環境

OS:Windows 10 Pro
ブラウザ:Chrome バージョン: 67.0.3396.99（Official Build） （64 ビット）
Angular: 6.0.3
ngx-onsenui: ^4.2.0
onsenui: ^2.10.0

問題

スクロールが発生するWeb画面を印刷しようとすると、1Pageしか印刷できない。（2Page以降にも印刷する画面があるが切れている。印刷するとスクロールバーも印刷される）

やった事

html内の<ons-page>タグを削除すると、全Page印刷することができた。ただし、画面のスクロールバーも消えた。

期待する事

htmlを変更せずに全Pageを印刷するにはどうしたらよいでしょうか？

印刷したい画面のHTML

<ons-page>

    <ons-toolbar>
        <div class="center">ストップウォッチ</div>
    </ons-toolbar>

    <br>

    <div class="container-fluid">

        <div class="row">
            <div class="col-md-12">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>ユーザー</th>
                                <th>開始</th>
                                <th>終了</th>
                                <th>H</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let work of works">
                                <td>{{work?.userId}}</td>
                                <td>{{work?.startedAt | date: 'yyyy/MM/dd HH:mm'}}</td>
                                <td *ngIf="!work?.isCompleted">{{nowDate | date: 'yyyy/MM/dd HH:mm:ss'}}</td>
                                <td *ngIf="work?.isCompleted">{{work?.finishedAt | date: 'yyyy/MM/dd HH:mm'}}</td>
                                <td class="column5" *ngIf="!work?.isCompleted"></td>
                                <td class="column5" *ngIf="work?.isCompleted">{{work?.time}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>

</ons-page>

Answer 1

mediaqueryを利用して印刷用のcssを定義するのが一般的だと思います。
Component自体の表示の切り替えがcssではなくjavascriptで行われている場合、
別途印刷用のページを作成して、そのページを印刷してもらうしか無いかもしれません。
また、何かしらのタグまたはComponentにoverflow:scrollが設定されている場合はそこにあたっているscrollをautoに変えることでうまく動くかもしれません。

Comments

[s.kun]

ご回答ありがとうございます。onsenui.css内にあるoverflowの設定を全てautoに変更しましたが、ダメでした。

[keisukeh]

現状出ているスクロールバーがどのボックスのスクロールバーか特定することは出来ますか？
スクロールバーが印刷されるということは通常のwindowに設定されているものではなくどこかの要素だと思うので。
cssに無いならjsで動的につけている可能性もありますので探ってみてはいかがでしょう。

[s.kun]

onsen-css-components.css内に
.page {
position: absolute;
}
.page__content {
position: absolute;
}
という記述があり、positionをstaticにするとスクロールバーが消えて、全ページが印刷できました。
後は、ご教示頂いた印刷用cssにて
@media print {
.page {
position: static;
}
.page__content {
position: static;
}
}
とすることで、解決いたしました。
本当にありがとうございます。

Answer 2

こういうことがやりたいのでしょうか。
https://hibikiji.com/tips-fullpagescreencapture/

Comments

[s.kun]

ご回答ありがとうございます。スクリーンショットではなく、印刷が行いたいです。ただ、結果としてはご教示頂いたツールでPDFを作成し印刷したものと同じになればよいです。