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

#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

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