JavaScriptでpdfに文字入力

前提・実現したいこと

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