前提・実現したいこと
html+CSSで静的なWebページを作成。
あらかじめ、PDF(項目が空)を読み込んでおき、
ユーザが入力フォームに入力した内容を、
PDFmakeを使用し、PDFの該当項目に描画する。
発生している問題・エラーメッセージ
PDFの新規作成&描画は可能だが、
既存のPDFを読み込み&描画する方法が分からない。
base64への変換が必要な様だが、変換方法が分からない。
試したこと
こちらのサイト(http://kougeisya.biz/programming/385/)を参考に新規作成のPDFへの描画までは出来た。
ソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4 <!-- ヘッダー --> 5<head> 6 <meta charset="UTF-8"> 7 <span class="xxxx"><!-- ヘッダー --></span> 8 <title>WEBページ</title> 9 <header>WEBページ</header> 10 11 <!-- スタイルシート --> 12 <link rel="stylesheet" href="cssファイル"> 13 14 <!-- スクリプト --> 15 <script type="text/javascript" src="./js/pdfmake.min.js"></script> <!-- pdfmake --> 16 <script type="text/javascript" src="./js/vfs_fonts.js"></script> <!-- フォント --> 17 <script type="text/javascript" src="./js/test01.js"></script> <!-- テスト01 --> 18</head> 19 20<body> 21 <!-- ボタン --> 22 <input type="button" value="出力" onclick="pdfOpen();" /> 23 <input type="reset" value="取消し"> 24</body> 25</html>
JavaScript
1//------------------------- 2// JSONで表記したPDFの内容 3//------------------------- 4var dd = { content: 'ここにpdfを表示する' }; 5 6//------------------------- 7// ボタンクリックイベント 8//------------------------- 9function pdfOpen() { 10 11 // フォント 12 pdfMake.fonts = { 13 GenShin: { 14 normal: 'GenShinGothic-Normal-Sub.ttf', 15 bold: 'GenShinGothic-Normal-Sub.ttf', 16 italics: 'GenShinGothic-Normal-Sub.ttf', 17 bolditalics: 'GenShinGothic-Normal-Sub.ttf' 18 } 19 } 20 21 // ディフォルトフォントを指定 22 if (!dd['defaultStyle']) { 23 dd['defaultStyle'] = new Object(); 24 } 25 dd['defaultStyle']['font'] = 'GenShin'; 26 27 28 // ブラウザ名を取得 29 var name = getBrowser(); 30 31 // ブラウザことに処理を分岐 32 // IEの場合 33 if (name == 'ie') { 34 pdfMake.createPdf(dd).download('create.pdf'); 35 36 // IE以外 37 } else { 38 pdfMake.createPdf(dd).open('create.pdf'); 39 } 40} 41 42//------------------------- 43// ブラウザを判定する関数 44//------------------------- 45var getBrowser = function() { 46 47 var name = 'unknown'; 48 49 // ユーザーエージェントを取得 50 var ua = window.navigator.userAgent.toLowerCase(); 51 52 // ieをチェック 53 if (ua.indexOf("msie") != -1 || 54 ua.indexOf('edge') != -1 || 55 ua.indexOf('trident/7') != -1) { 56 name = 'ie'; 57 58 // ie以外 59 } else if (ua.indexOf('chrome') != -1) { 60 name = 'chrome'; 61 62 } else if (ua.indexOf('safari') != -1) { 63 name = 'safari'; 64 65 } else if (ua.indexOf('opera') != -1) { 66 name = 'opera'; 67 68 } else if (ua.indexOf('firefox') != -1) { 69 name = 'firefox'; 70 } 71 72 return name; 73} 74
初めての質問の為、至らぬ点があれば申し訳ございません。
参考となるHPやソースコード、アドバイスなどありましたらご教示お願い致します。
回答1件
あなたの回答
tips
プレビュー