Hapicode

# javascript で作る html から PDF 変換 pdfmake の日本語対応

pdfmake はブラウザー側で pdf 作成可能な javascript ライブラリです。デフォルトでは日本語未対応ですが、フォントを導入すると日本語文字化けなしできれいに作れます。
ブラウザー側に javascript だけで PDF 作成するときのメモまとめました。

# 日本語対応：無料フォント IPA フォント使う

無料のフォントを探していたが、一部漢字対応しているけど、全角記号対応してないフォントもありましたが、最終的に IPA フォントにしました。

IPA フォントは 情報処理推進機構 IPA が作った仕様 複製 配布 フリーの無料フォントです。

パック詳細:IPA フォント（IPA フォント 4 書体パック） IPAfont00303.zip

  • はじめにお読みください Readme_IPAfont00303.txt
  • IPA フォントライセンス v1.0 IPA_Font_License_Agreement_v1.0.txt
  • IPA ゴシック ipag.ttf
  • IPA P ゴシック ipagp.ttf
  • IPA 明朝 ipam.ttf
  • IPA P 明朝 ipamp.ttf

ダウンロード
IPA フォント（IPA フォント 4 書体パック） (opens new window)

その他の IPA フォント

# pdfmake の初期設定

github からレポジトリダウンロードして使うことも可能
ダウンロード (opens new window)

# npm からインストールする場合

# package install
npm i pdfmake

mkdir -p node_modules/pdfmake/examples/fonts

# node_modules/pdfmake/examples/fontsディレクトリにフォント貼り付ける
#

# pdfmake作業ディレクトリにてビルド
cd node_modules/pdfmake && npm i && npm run build

# javascript 出来上がり

必要なパッケージ読み込んで、content いじって、吐き出す流れになります。
細かい設定は style や margin で調整

import pdfMake from "pdfmake/build/pdfmake";
import pdfFonts from "pdfmake/build/vfs_fonts";
import htmlToPdfmake from "html-to-pdfmake";
pdfMake.vfs = pdfFonts.pdfMake.vfs;
pdfMake.fonts = {
  ipa: {
    normal: "ipagp.ttf",
    bold: "ipagp.ttf"
  }
};

const content = [
  {
    table: {
      headerRows: 1,
      widths: ["*", "auto", 100],
      body: [
        ["日本語対応", "pdf印刷ダウンロード", "pdfmake"],
        ["Value 1", "Value 2", "Value 3",
        [{ text: "Bold value", bold: true }, "Val 2", "Val 3"]
      ]
    }
  }
];

const docDef = {
  defaultStyle: {
    font: "japaneseFont"
  },
  styles: {
    alignRight: {
      alignment: "right"
    },
    alignCenter: {
      alignment: "center"
    },
    bold: {
      fontSize: 24,
      bold: true
    }
  },
  content: content
};

pdfMake.createPdf(docDef).download('htmlPdfConvert.pdf');

# 使用可能な属性プロパティ Property

# スタイル系 Style

項目 型 その他
font String
fontSize Number
lineHeight Int
bold Boolean
italics Boolean 斜体
alignment String left center right justify
color String
background String
markerColor String
decoration String underline lineThrough overline
decorationStyle String dashed dotted double wavy
decorationColor String )
var docDefinition = {
  content: [
    "This is a standard paragraph, using default style",
    { text: "This paragraph will have a bigger font", fontSize: 15 },
    {
      text: [
        "This paragraph is defined as an array of elements to make it possible to ",
        { text: "restyle part of it and make it bigger ", fontSize: 15 },
        "than the rest.",
      ],
    },
  ],
};

# マージン Margin

margin: [左,上,右,下]
margin: [左右,上下]
margin: 左右上下

// margin: [left, top, right, bottom]
{ text: 'sample', margin: [ 5, 2, 10, 20 ] },

// margin: [horizontal, vertical]
{ text: 'another text', margin: [5, 2] },

// margin: equalLeftTopRightBottom
{ text: 'last one', margin: 5 }

# カラム Columns

２分等表示３分等表示段落分等表示する際に使えます。

{
  content: [
    {
      columns: [{ text: "ログインID " }, { text: "パスワード " }],
    },
  ];
}

# テーブル Table

テーブルはちょっとした癖がありますが、なれたら使いやすくなってます。

{
  content: [
    {
      columns: [{ text: "ログインID " }, { text: "パスワード " }],
    },
    {
      table: {
        widths: ["*", "auto", 100, "*"],
        body: [
          ["First", "Second", "Third", "The last one"],
          ["Value 1", "Value 2", "Value 3", "Value 4"],
          [{ text: "Bold value", bold: true }, "Val 2", "Val 3", "Val 4"],
        ],
      },
    },
    {
      table: {
        body: [
          [{ text: "First", width: 100 }, "Second", "Third", "The last one"],
          ["Value 1", "Value 2", "Value 3", "Value 4"],
          [
            { text: "Val 1", margin: 5 },
            { text: 1000, alignment: "right", bold: true },
            "Val 3",
            "Val 4",
          ],
        ],
      },
    },
  ];
}

# リスト List

HTML タグのul olみたいにリスト作成

{
  ul: ["list1", "list2", { text: "list3", bold: true }];
},
{
  ol: ["olist1","olist2","olist3"]
}

# 画像 Image SVG

HTML タグのimg みたいなもの、ブラウザーなら base64 エンコードデータにする必要があります。

{
  image: 'data:image/jpeg;base64,...encodedContent...',
  width: 150,
  height: 150
},
{
  svg: '<svg width="300" height="200" viewBox="0 0 300 200">...</svg>'
}

HTML のaタグみたいなもの

{text: 'google', link: 'http://google.com'},
{text: 'Go to page 2', linkToPage: 2}

# QR コード

シンプルに一行だけで QR コード作れます。

{
  content: [
    // basic usage
    { qr: "text in QR" },

    // colored QR
    { qr: "text in QR", foreground: "red", background: "yellow" },

    // resized QR
    { qr: "text in QR", fit: "500" },
  ];
}

オプション & プロパティ

項目 必須 備考
qr 必須 text in QR code
foreground optional
background optional
fit optional
version optional
eccLevel optional 可能値: L M Q H デフォルト L
mode optional 可能値: numeric alphanumeric octet
mask optional

# HTML から変換してくれるツール htmlToPdfmake

pdfmake 詳しく学習しなくても html で変換してくれるツールがあります。

import pdfMake from "pdfmake/build/pdfmake";
import pdfFonts from "pdfmake/build/vfs_fonts";
import htmlToPdfmake from "html-to-pdfmake";
pdfMake.vfs = pdfFonts.pdfMake.vfs;
pdfMake.fonts = {
  ipa: {
    normal: "ipagp.ttf",
    bold: "ipagp.ttf"
  }
};

export function hcloMember|| {
  const html = `
    <div>
      <h1 style="color: red;">日本語</h1>
      <table style="width: 100%; font-size: 10px">
        <tr>
          <th>お客様ID</th>
          <td>0000</td>
        </tr>
        <tr>
          <th>契約者名</th><td>テスト太郎</td>
        </tr>
        <tr>
          <th>契約者住所</th><td>大阪府大阪市２－２－３　本末ビル２F</td>
        </tr>
      </table>
    </div>`;
  const docDef = {
    content: [htmlToPdfmake(html)],
    defaultStyle: {
      font: "ipa"
    }
  };

  pdfMake.createPdf(docDef).download('htmlPdfConvert.pdf');
}

pdfmake Document (opens new window)
pdfmake Playground (opens new window)

# Uncaught (in promise) File 'ipagp.ttf' not found in virtual file system

Uncaught (in promise) File 'ipagp.ttf' not found in virtual file system

エラーメッセージが出ったipagp.ttfファイルがないことが原因で、gulp でフォント再ビルドする必要があります。
vfs は virtual file system の略かなあ？

pdfmake/build/vfs_fonts.js 設定して上げれば問題解決

# gulp使うので、gulpインストール
npm i -g gulp

# cd node_modules/pdfmakeディレクトリまで移動
cd node_modules/pdfmake/

# フォント格納するためのディレクトリ作成
mkdir examples && mkdir examples/fonts

# フォントコピー　貼り付け
cp ../../public/fonts/*.ttf examples/fonts/

# npm インストール実行
npm install

# ガルプでフォント作成 vfs_fonts 更新
gulp buildFonts

# できました！
[16:04:31] Using gulpfile ~/www.example.info/node_modules/pdfmake/gulpfile.js
[16:04:31] Starting 'buildFonts'...
[16:06:00] Finished 'buildFonts' after 1.47 min
2019-12-19
  • javascript

関連記事

正規表現一覧 よく使う検索・置換のパターン

よく使う正規表現、文字検索・置換をまとめてみました。...

javascript 日本語 shift-js 対応 CSV ダウンロード

javascript shift-jsエンコード CSVダウンロードが必要になったので、作ってみまし...

ブラウザーで動く javascript のクッキー操作ライブラリ js-cookie

フロントのブラウザー側で動くjs cookieについて...

ReferenceError: location is not defined

ssrレンダリングする時に出る location is not defined エラー##...

moment.js 使って日本語曜日対応

momentjsの日本語表示、曜日の日本語表示と略称表示について...

nodejs 使う時のエラーたち

node学習しながらエラーの原因などを調べてメモります。...

javascript reduce 連想配列の合計計算覚えよう

javascript 配列 sum 合計計算、reduce 使ってやってみて覚える連想配列の落とし穴...

Sweet Alert swal に複数 content

javascriptアラートを綺麗に表示する粋なライブラリSweetAlertのswalの中のcon...

javascript 開発で出会った TypeError

vuepress で Cannot read property 0 of undefinedのタイプ...

開発時によく使うゼロ埋めパディング作業まとめ

mysql twig phpとjavascriptでよく使うゼロ埋めのいろいろ...

Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ

電話番号チェック・メールアドレスチェック・文字チェック・郵便番号のチェックに使えるjavascrip...

nuxtjs と codeigniter で jwt システム構築

nuxtjsとcodeigniterでシステム構築する際のメモ...

javascript 楽しく遊ぼう!メッセージつぶやくウシ cowsay

楽しくjavascriptを遊ぶ用のパッケージcowsayについてのメモ...