{"id":5673,"date":"2016-02-10T17:56:43","date_gmt":"2016-02-10T08:56:43","guid":{"rendered":"http:\/\/www.skyarch.net\/blog\/?p=5673"},"modified":"2016-02-10T17:56:43","modified_gmt":"2016-02-10T08:56:43","slug":"javascript-node-js-pdfmake-pdf-printing-library-with-japanese-fonts-support","status":"publish","type":"post","link":"https:\/\/www.skyarch.net\/blog\/javascript-node-js-pdfmake-pdf-printing-library-with-japanese-fonts-support\/","title":{"rendered":"[Javascript, Node.js] PDFMake PDF printing library with Japanese Fonts Support"},"content":{"rendered":"<p>PDFmake is a fully declarative and has a powerful layout engine for print pdf in Client\/service side of your application.<br \/>\nIt is also Open Source and has very active contributors.<br \/>\nFor more information visit: \u00a0<a href=\"http:\/\/pdfmake.org\/#\/\" target=\"_blank\">PDFmake<\/a><\/p>\n<p>We are also using the ipam.ttf for Japanese font support.<br \/>\nby downloading it in this URL: \u00a0<a href=\"http:\/\/ipafont.ipa.go.jp\/old\/ipafont\/download.html\" target=\"_blank\">ipa.ttf<\/a><\/p>\n<p>\u00a0<\/p>\n<h3>\u00a0Installation Instructions:<\/h3>\n<p>Install npm and Node modules by running the script.<\/p>\n<ul>\n<li>For RPM-based distributions:\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\">  sudo yum install nodejs npm --enablerepo=epel <\/pre>\n<\/li>\n<li>For Debian based distributions:\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\"> sudo apt-get install nodejs nodejs-legacy npm <\/pre>\n<\/li>\n<\/ul>\n<p>In your<strong> package.json<\/strong> file add the following line:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\"> 'pdfmake-browserified': '^0.1.4' <\/pre>\n<p>or execute this:<\/p>\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\"> npm\u00a0install\u00a0pdfmake-browserified <\/pre>\n<p>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.<br \/>\nMeaning, the necessary files are already included in the app. and i'ts already a minified javascript version.<\/p>\n<p><strong>Note<\/strong>: Make sure you installed browserify-rails in your application.<br \/>\nBy using this link: <a href=\"https:\/\/github.com\/browserify-rails\/browserify-rails\" target=\"_blank\">browserify-rails<\/a><\/p>\n<p>Execute install script.<\/p>\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\">sudo npm i<\/pre>\n<p>Import the library into your application (For example).<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar createPdf = require('pdfmake-browserified');\r\nvar dd = { content: 'This is a sample PDF printed with pdfMake' };\r\ncreatePdf(dd).open();\r\n<\/pre>\n<p>\u00a0<\/p>\n<h3>\u00a0Japanese Characters support<\/h3>\n<p>Now, We are going to add the necessary dependencies for Supporting Japanese Characters.<\/p>\n<p>Let's use a font builder from <strong>.ttf<\/strong> file into a portable <strong>.js<\/strong> file in pdfmake-fonts-google by cloning it outside your project:<\/p>\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\"> git clone https:\/\/github.com\/xErik\/pdfmake-fonts-google.git <\/pre>\n<p>Once you have cloned the repository, we need to extract the ipam.tff that was downloaded into the fonts directory:<\/p>\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\"> pdfmake-fonts-google\/lib\/ufl <\/pre>\n<p>Then we need to install node dependencies first before running the build the font script.<\/p>\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\"> npm install <\/pre>\n<p>Then run the the build script using grunt which we declared in the <code>lib\/*<\/code> folder.<\/p>\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\"> grunt <\/pre>\n<p>Once the script is done, We are now going to use the built file by copying the .js and .map.js file located in:<\/p>\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\">pdfmake-fonts-google\/build\/browserified\/ufl <\/pre>\n<p>Add the two files to your rails javascript assets.<br \/>\nThen include them to your create pdf parameters by referring to this <strong>example code.<\/strong><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n var createPdf = require('pdfmake-browserified');\r\n var map = require('path_to_your_file\/browserified\/ofl\/ipam.map.js'); \/\/ font style mapping\r\n var data = require('path_to_your_file\/browserified\/ofl\/ipam.js'); \/\/ font data\r\n\r\nvar defaultFont = Object.keys(map)&#x5B;0];\r\n\r\nvardocDefinition = {\r\ncontent: &#x5B;'This is a sample PDF printed with pdfMake', '\u3053\u308c\u306fpdfMake\u3067\u5370\u5237\u30b5\u30f3\u30d7\u30ebPDF\u3067\u3059',],\r\ndefaultStyle: { font: defaultFont }\r\n};\r\n\r\n\r\ncreatePdf(docDefinition, map, data).open();\r\n<\/pre>\n<p><strong>Output:\u00a0<\/strong><\/p>\n<a href=\"http:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2016\/02\/pdfmake_output.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-5666 size-full\" src=\"http:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2016\/02\/pdfmake_output.png\" alt=\"pdfmake_output\" width=\"603\" height=\"252\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2016\/02\/pdfmake_output.png 603w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2016\/02\/pdfmake_output-300x125.png 300w\" sizes=\"auto, (max-width: 603px) 100vw, 603px\" \/><\/a>\n<p>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.<br \/>\n<a href=\"http:\/\/pdfmake.org\/#\/\" target=\"_blank\">Pdfmake Site<\/a><br \/>\n<a href=\"http:\/\/pdfmake.org\/#\/gettingstarted\" target=\"_blank\">PDFmake Documentation<\/a><br \/>\n<a href=\"http:\/\/pdfmake.org\/playground.html\" target=\"_blank\">PDFmake Playground<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>PDFmake is a fully declarative and has a powerful layout engine for print pdf in Client\/service side of your a&#8230;<\/p>\n","protected":false},"author":1,"featured_media":5662,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_locale":"ja","_original_post":"5658","footnotes":""},"categories":[95,9],"tags":[],"class_list":{"0":"post-5673","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-skyhopper","8":"category-dev","9":"ja"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/posts\/5673","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/comments?post=5673"}],"version-history":[{"count":1,"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/posts\/5673\/revisions"}],"predecessor-version":[{"id":5674,"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/posts\/5673\/revisions\/5674"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/media\/5662"}],"wp:attachment":[{"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/media?parent=5673"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/categories?post=5673"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/tags?post=5673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}