Vueで日本語PDFの帳票をクライアント生成してダウンロードさせる方法canvas版


前置き

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は画面外にすっ飛ばして、プレビューする同じコンテンツを配置しています