pdf.jsを使って画面をpdfにするときのテクニック

どうしてもサーバサイド言語を使わずにpdfにしないといけないというので色々やったメモです。

基本お作法

• pdf.js
• canvas2html

を用意してやり

let doc = new jsPDF('p','pt','a4')
let dom = document.body
doc.addHTML(dom, () => {
  doc.save('html.pdf')
})

これでbody（見えてる画面）がpdfになります。

注意するべき点

• 何もしないとクライアントの画面サイズで書き出される
• object-fitのcoverやcontainは効かない

何もしないとクライアントの画面サイズで書き出される

結構ハマりました。
cssで幅指定したり、canvas2htmlのオプション調べたり・・・
結局addHTML()の第4引数(options)でwindowWidthとwidthという2つの値を調整すればよさそうでした。

let doc = new jsPDF('p','pt','a4')
let dom = document.body
doc.addHTML(dom, 0, 0, {
  windowWidth: 1500,
  width: 1500
} () => {
  doc.save('html.pdf')
})

object-fitのcoverやcontainは効かない

これはfill状態になります。
backgroudは画像すら出ません。
素直に画像を直すか、親要素をつけてoverflow:hiddenと子要素の画像をうまく位置をずらし擬似的にobject-fitしてるっぽくすることで回避できます。

今見ている画面でなく違う画面をpdfにしたい時

画面遷移させてそこでpdfというのでもいいですが、そういったことはさせずpdfにしたい場合。
このとき隠し要素をコーディングしておき、let dom = document.bodyをその要素にしてやればいいです。
display:none;やopacity:0;とするとsave()で真っ黒になってしまいます。
いろいろ試しましたが、z-index:-1とかで見えない場所に置いておくとうまくいきます。