JavaScriptでPDF出力をする方法

2020年2月4日 2020年12月10日

こんばんは！

今回はJavaScriptでPDFを出力する方法についてです。

jsPDF

JavaScriptでPDFを出力できるjsPDFというライブラリが公開されていました。

ダウンロードは↓からできます。

https://github.com/MrRio/jsPDF

プログラム

ダウンロードが終わったら「dist」というファイルの中にある「jspdf.min.js」をhtml内で読み込んでプログラムを作成します。

<html>
    <head>
    <title>jsPDF</title>
        <meta http-equiv="content-type" content="text/html"; charset="utf-8">
        <script type="text/javascript" src="jspdf.min.js"></script>
<script>
function generatePDF(){
var doc = new jsPDF();
doc.setTextColor(0,255,0);
doc.text(10,10,'jsPDFtest');
doc.save('jsPDFtest.pdf');
}
</script>
    </head>
<body>
<h1>jsPDF test</h1>
<a href="javascript:generatePDF()">ダウンロード</a>
</body>
</html>

<html>

<head>

<title>jsPDF</title>

function generatePDF(){

var doc = new jsPDF();

doc.setTextColor(0,255,0);

doc.text(10,10,'jsPDFtest');

doc.save('jsPDFtest.pdf');

}

</script>

</head>

<body>

<h1>jsPDF test</h1>

<a href="javascript:generatePDF()">ダウンロード</a>

</body>

</html>

new jsPDFでjsPDFクラスのインスタンスを生成し，textメソッドでPDFに文字を書き込み，saveメソッドでPDFを保存するというシンプルなコードです。

setTextColorメソッドで色を指定しています。(0,255,0)というのはRGB値です。詳しくは下の記事をご覧ください。

RGB基本16色

実行すると以下のようになります。

ダウンロードをクリックするとPDFがダウンロードされます。

注意

jsPDFでは日本語を表示しようとすると文字化けが起こります。

他の方を見ていると、フォントを埋め込んだりして解決しているようですが、それならPHPで生成した方がいいのでは？と個人的には思います。

【無料】ゲームをやるだけで暗号資産のマイニングができる！RollerCoinを紹介

JavaScriptでPDF出力をする方法

jsPDF

プログラム

注意