javascriptでPDF出力(日本語表示)
javascriptだけでPDFが生成できるのでs3だけでも動的なPDF生成が可能。 localStorage等と利用すればもっと広がりそう。
何ができるか。
数独(ナンプレ)の問題と答えを印字したPDFを動的に生成するプログラムとか。。
ビンゴカード生成するプログラムとか。。。。
⇒ 作ってません(--;)
DEMO
↑ 上記ボタンを押すとPDFがダウンロードされます。
ソース
function getTextJpegBase64(text, fsize){ var canvas = new fabric.Canvas('c',{backgroundColor : "#fff"}); canvas.add(new fabric.Text(text, { fontFamily: 'Arial',fill: 'black',left: 0,top: 0,fontSize: fsize })); canvas.setHeight(fsize * 2); canvas.setWidth(790); canvas.calcOffset(); canvas.renderAll(); return $('canvas').get(0).toDataURL('image/jpeg'); } $(document).ready(function() { $('#download-pdf').click(function(){ var doc = new jsPDF(); doc.addImage(getTextJpegBase64("日本語表示", 24), 'JPEG', 10, 20); doc.save('sample.pdf'); }); });
依存関係
- jquery
- jspdf.js
- jspdf.plugin.addimage.js
- FileSaver.js
- fabric.js
- canvasタグ1つ
簡単な解説
jspdf.jsが日本語対応していないので、canvasに日本語で文字書いて、imgとしてpdfに取り込んでいます。