[Javascript, Node.js] PDFMake PDF printing library with Japanese Fonts Support

この記事は公開されてから半年以上経過しています。情報が古い可能性がありますので、ご注意ください。

PDFmake is a fully declarative and has a powerful layout engine for print pdf in Client/service side of your application.
It is also Open Source and has very active contributors.
For more information visit:  PDFmake

We are also using the ipam.ttf for Japanese font support.
by downloading it in this URL:  ipa.ttf

 

 Installation Instructions:

Install npm and Node modules by running the script.

  • For RPM-based distributions:
      sudo yum install nodejs npm --enablerepo=epel 
  • For Debian based distributions:
     sudo apt-get install nodejs nodejs-legacy npm 

In your package.json file add the following line:

 'pdfmake-browserified': '^0.1.4' 

or execute this:

 npm install pdfmake-browserified 

Let's use browserified version because during production builds, when including this module, you want to exclude this module from minification/uglification/compression, as it is already minified.
Meaning, the necessary files are already included in the app. and i'ts already a minified javascript version.

Note: Make sure you installed browserify-rails in your application.
By using this link: browserify-rails

Execute install script.

sudo npm i

Import the library into your application (For example).

var createPdf = require('pdfmake-browserified');
var dd = { content: 'This is a sample PDF printed with pdfMake' };
createPdf(dd).open();

 

 Japanese Characters support

Now, We are going to add the necessary dependencies for Supporting Japanese Characters.

Let's use a font builder from .ttf file into a portable .js file in pdfmake-fonts-google by cloning it outside your project:

 git clone https://github.com/xErik/pdfmake-fonts-google.git 

Once you have cloned the repository, we need to extract the ipam.tff that was downloaded into the fonts directory:

 pdfmake-fonts-google/lib/ufl 

Then we need to install node dependencies first before running the build the font script.

 npm install 

Then run the the build script using grunt which we declared in the lib/* folder.

 grunt 

Once the script is done, We are now going to use the built file by copying the .js and .map.js file located in:

pdfmake-fonts-google/build/browserified/ufl 

Add the two files to your rails javascript assets.
Then include them to your create pdf parameters by referring to this example code.

 var createPdf = require('pdfmake-browserified');
 var map = require('path_to_your_file/browserified/ofl/ipam.map.js'); // font style mapping
 var data = require('path_to_your_file/browserified/ofl/ipam.js'); // font data

var defaultFont = Object.keys(map)[0];

vardocDefinition = {
content: ['This is a sample PDF printed with pdfMake', 'これはpdfMakeで印刷サンプルPDFです',],
defaultStyle: { font: defaultFont }
};


createPdf(docDefinition, map, data).open();

Output: 

pdfmake_output

Thats it! Your good to go. For more details about how to use pdfmake please refer to this site and documentation, The site has also a playground for you to check out how it works.
Pdfmake Site
PDFmake Documentation
PDFmake Playground

投稿者プロフィール

スカイブロガー

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Time limit is exhausted. Please reload CAPTCHA.