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

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

前置き

Reactのプロジェクトで日本語PDFを生成するプロジェクトがあったので、Vueでもやってみました
Reactで日本語PDF

なお、単一ファイルコンポーネントでの対応です。

使うもの

• pdfmake
• html2canvas
• paper.css

どうするのか

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

もしも画面内プレビューがいらない場合は、印刷するコンテンツをこのようにすっ飛ばすと良いようです。

position: fixed; 
  top: 200vh;