Webの画面をPDFにしようとした話

はじめに

先日こんなことを言われました

Webの画面をそのまんまPDFにして
DLしたい！！！

「（え、Webの画面なら印刷画面開いて
PDFをDLしたらよくない・・・？？？）
わかりました！！！」

ということで考えていく

1.画面を画像として保存
2.メモリに保存した画像をPDFに変換

これで行こうと思ったのですが
画面の比率がひどいことになりました
原因は画像化する際に解像度が著しく落ちるためです
画像なんてひどくて
見れたもんじゃない

初期の白黒のテレビくらい画像がぶれています
現代っ子の僕にはとても見れたものではない

じゃあ
JavaScriptでごり押しできないか・・・？

調べたらたくさんありました
そういう便利なやつ

方法としては
Html2canvasでcanvasに画面を画像として保持
jsPDFでPDF出力
というお手軽簡単！！
キューピーもびっくり！！！

ということでやっていきましょう

以下はHTMLに埋め込むスクリプトです

function [任意の名前](){
		html2canvas(document.querySelector("#[後述1]"),{
            scale:1
			allowTaint:true,
			useCORS:true,
		}).then(canvas => {
            //canvasに保持
		    var img = canvas.toDataURL("image/png");
            //PDFを作成
		    var doc = new jspdf.jsPDF();

		    var width = doc.internal.pageSize.width;
			doc.addImage(img,'PNG',0,0,width,0);
			doc.save("[任意の名前]");
		});
	}

とざっくりこんな感じ

後述1の部分には
PDF化したいHTMLの

の部分を#~~~~という形式でぶち込もう

また、事前準備として
・jsPDF
・HTML2canvas
が必要なので

URLをScriptに入れ込むか
事前にフォルダに入れておこう

どちらの場合でも動くことは確認できたので
問題ないかと思われる

tymleafなどを使用しているとタグがやや
tymleaf寄りになってしまうので
その部分だけ注意が必要かもしれない。

以上、覚書