前置き
Reactのプロジェクトで日本語PDFを生成するプロジェクトがあったので、Vueでもやってみました
Reactで日本語PDF
なお、単一ファイルコンポーネントでの対応です。
使うもの
どうするのか
Qiitaで「vue pdf」検索すると出てくるのがこの記事です。
https://qiita.com/komatzz/items/b71167a024444f463a6b
Reactでの先駆者の記事と同じくpdfmakeの素の文字機能を使っており、日本語でのPDF帳票ができるところまでなかなか難しい。
また、レイアウトなども難しそうです。
なので、DOMをcanvasにしてPDFに出力する方法を取ります。
モジュール追加
npm install --save pdfmake html2canvas
その他
logic.jsを作成し、サンプルコードを貼り付けます。
paper.cssを作成し、サンプルコードを貼り付けます。
そして、refsで参照したelementを、logic.jsの関数に食べさせればOKです。
参考のソースはCodesandboxに作ったのでこちらを見てください。
https://codesandbox.io/s/mqyzy8158x
もしも画面内プレビューがいらない場合は、印刷するコンテンツをこのようにすっ飛ばすと良いようです。
画面内に印刷するものを配置すると横幅が崩れてしまいました。
そのため、印刷するelementは画面外にすっ飛ばして、プレビューする同じコンテンツを配置しています