web画面に表示している表を印刷したい

Question

前提・実現したいこと

vue.jsでwebアプリの開発を行っています。
現在webアプリで画面に表示している表を印刷したいと思っています。
ブラウザの印刷機能では余計な範囲まで印刷に含まれてしまうため、表のみをPDFかExcelファイルに複製し、そちらで印刷を行いたいと考えています。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード

試したこと

jspdfを用いてPDFを作成する場合、日本語のbase64エンコード後のテキストが大きすぎるためかPDFがうまく作成されませんでした。

SheetJSを用いたexcelファイルの作成の場合、無料のものではセルや罫線のスタイルまで適用してくれなさそうなため要件を満たせないと感じています。

補足情報（FW/ツールのバージョンなど）

web画面に表示した表を帳票のような形で印刷する方法が他にあれば教えていただきたいです。

Comments

[m.ts10806]

サーバーサイドでの処理は検討にはないですか？

[n.azaz]

サーバー構築の経験がないため、データの保存等はFirebaseを利用させていただいてます。そのためあまりサーバーで処理を組むことはできないのではないかと考えていました。

[m.ts10806]

いえ、あくまでPHPやJavaの話です。まあ、検討に入らないのでしたら私はこれにて。

Answer 1

cssに印刷用のメディアクエリがあるのでそれを使うのではだめなのでしょうか？

@media print { 
 // 印刷画面に要らない要素にdisplay:none;を記載する
}

Comments

[n.azaz]

回答ありがとうございます。
詳しく調べてみたいと思います。

[m.ts10806]

PDFやExcelを別途出力するという質問本文から、URLとか印刷結果に含まれるのが嫌なのかなあと考えました。

[makosankibu]

> m.ts10806
なるほど。この質問文からはそういう捉え方もできますね。
もしそうならサーバーサイドで処理するほうが楽かもしれませんが、そこは質問者の返答待ちですね

Answer 2

ブラウザ側でPDF作成できる事が条件であればpdfmake というのもあるみたいです。

使ったことはないので紹介しかできませんが、試されてはいかがでしょう。