前書き Reactの案件の中で日本語のPDFを出力する必要があり、 そのためにクライアントサイド(React側)のみで日本語PDFを出力する方法をまとめたので記事にしました。 前準備 今回は、pdfmakeというクライアントサイドでPDFを出力するJavaScriptライブラリを利用します。 npmパッケージでも存在するのでコマンドでインストールできるのですが 日本語フォントを利用するため、Githubからjsファイルを落とします。 bpampuch/pdfmake 上記のリポジトリから以下のファイルを落とします。 - pdfmake.min.js - vfs_fonts.js 日本語PDF出力の準備 pdfmakeは、そのまま利用すると日本語フォントが利用できません。 そのため、独自に日本語のフォントを利用できるようにする必要があります。 ダウンロードしてきた、vfs_fonts.jsに
![クライアントサイド(React)で日本語PDFを出力する。](https://cdn-ak-scissors.b.st-hatena.com/image/square/8262ae4bd67c5d8c49d75553ec6c9f43997d7424/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgyJUFGJUUzJTgzJUE5JUUzJTgyJUE0JUUzJTgyJUEyJUUzJTgzJUIzJUUzJTgzJTg4JUUzJTgyJUI1JUUzJTgyJUE0JUUzJTgzJTg5JTI4UmVhY3QlMjklRTMlODElQTclRTYlOTclQTUlRTYlOUMlQUMlRTglQUElOUVQREYlRTMlODIlOTIlRTUlODclQkElRTUlOEElOUIlRTMlODElOTklRTMlODIlOEIlRTMlODAlODImdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWVlZmQ4MjUzNjM2NDViNTcwMjM2MDE1NTNmMzM4ZjU4%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwbWFlY2hvJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz05MmUzN2EzYWUwM2ZkODY4MGI1MWU4NTA3ZTkwYzY2ZA%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dfb735e5e1676feb4fcd8db3f8d28afe8)