Posted at

クライアントサイドでpdfを生成できるpdfmake.jsをreactで使ってみた

More than 1 year has passed since last update.


pdfmakeとは

pdfを動的にクライアント側で生成できるもの


使い方

package.jsonと同じディレクトリで

npm i -D pdfmake

これでreactのコンポーネント内でimportしてきてあげれば使えるようになります。

下記の関数をonclick等で実行してあげれば動くはずです。


sample.js

import pdfMake from "pdfmake/build/pdfmake";

import pdfFonts from "pdfmake/build/vfs_fonts";
pdfMake.vfs = pdfFonts.pdfMake.vfs;

const print = (e) => {
alert('text');
e.preventDefault()//submitの効果を打ち消す
pdfMake.fonts = {
GenShin: {
normal: 'GenShinGothic-Normal-Sub.ttf',
bold: 'GenShinGothic-Normal-Sub.ttf',
italics: 'GenShinGothic-Normal-Sub.ttf',
bolditalics: 'GenShinGothic-Normal-Sub.ttf',
},
};
const defaultStyle = 'GenShin';
const docDefinition = {
content: [
{
text: 'React Generate PDF Sample',
style: 'header'
},
{
text: 'Sentence',
style: 'subheader'
},
`Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
これはただのサンプルです
Aenean commodo ligula eget dolor. Aenean massa.
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
eleifend tellus.`
,
{
text: 'Styles',
style: 'subheader'
},
{
text: 'これはただのサンプルです
',
style: { fontSize: 15 },
},
{
text: '赤これはただのサンプルです
',
style: { color: 'red', fontSize: 30 },
},
{
text: '青これはただのサンプルです
',
style: { color: 'blue', fontSize: 40 },
},
{
text: '黄これはただのサンプルです
',
style: { color: 'yellow', fontSize: 50 },
},
],
defaultStyle: {
font: defaultStyle,
},
styles: {
header: {
fontSize: 30,
},
subheader: {
fontSize: 20,
},
},
};

pdfMake.createPdf(docDefinition).open();
};



問題点

pdfmakeを調べてきた皆さんなら、書かれている記事の大半に載っているであろう問題点、それが日本語対応していないということです。


解決方法

クライアントサイド(React)で日本語PDFを出力する。

上記の記事の方のgithubのリポジトリを落としてきて、vfs_fonts.jsを探してきてください(確か2MBぐらいのファイルのはず)それをnode_moduleの中にあるvfs_fonts.jsと入れ替えます。

その際1行目に書いてる


vfs_fonts.js

window.pdfMake = window.pdfMake || {}; window.pdfMake.vfs



vfs_fonts.js

this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs


に変更してください(元々の記述がそうだったので)