web-dev-qa-db-ja.com

jsPDFのカスタムフォントフェイス？

JsPDFにカスタムフォントを含めることは可能ですか？

基本ライブラリでは、 'doc.getFontList（）'をコンソールログに記録すると、次のようになります。

Courier、Helvetica、Times、courier、helvetica、times

しかし、「Comic Sans」を使いたいと言ってください（私はそうするつもりはありません; o））できますか？

さらに良いことに、ローカルに保存され、@ font-faceでサイトで宣言されているフォントを使用できますか？

jspdf
16
Pat Dobson

パブリックAPIの既存のaddFontメソッドを公開するように_jsPDF.js_を変更することで、これが可能であることがわかりました。

_jsPDF.js_で、次を探します：

_//---------------------------------------
// Public API
_

以下を追加します。

_    API.addFont = function(postScriptName, fontName, fontStyle) {
      addFont(postScriptName, fontName, fontStyle, 'StandardEncoding');
    };
_

わかりやすくするために、このメソッドを他のフォントメソッドの近くに配置します-_API.setFont_、_API.setFontSize_、_API.setFontType_など.

コードで次を使用します。

_doc.addFont('ComicSansMS', 'Comic Sans', 'normal');
doc.setFont('Comic Sans');
doc.text(50,50,'Hello World');
_

これは、jsPDFをロードする前にcssに含まれる@ font-faceフォントとシステムフォントで機能します。おそらくjsPDFのプラグインフレームワークを使用してこれを行うためのより良い方法がありますが、この迅速で汚い解決策は、少なくともあなたを動かします。

doc.getFontList()がnot追加されたフォントを表示することに注意してください：

_// TODO: iterate over fonts array or return copy of fontmap instead in case more are ever added.
_
23
Dave Snyder

最新バージョンの jsPDF（1.5.3） を使用すると、はるかに簡単になります。

フォルダjsPDF-master> fontconverterを見ると、ファイルfontconverter.htmlがあります。ブラウザで開き、Browse...ボタンを使用してナビゲートし、.ttfフォントファイルを選択します。

「作成」をクリックします。

enter image description here

ページには、保存する「ダウンロード」が表示されます。これにより、[次のような] .jsというRopaSans-Regular-normal.jsファイルが生成されます。これは、PDFを生成するページに含める必要があります。個人的には、メインページのヘッダーで行いました（そしてscriptsの順序に注意してください）：

<!-- pdf creation -->
<script src="FileSaver.js-master/src/FileSaver.js"></script>
<script src="jsPDF-master/dist/jspdf.debug.js"></script>

<!-- custom font definition -->
<script src="path-to-the-file-just-saved/RopaSans-Regular-normal.js" type="module"></script>

次に、PDF jsでの生成方法：

doc.setFont('RopaSans-Regular');
doc.setFontType('normal');
4
Todd

ここに私が使用しているソリューションがあります...

最初に、他の人が述べたように、これらの2つのライブラリが必要です。

  1. jsPDF： https://github.com/MrRio/jsPDF
  2. jsPDF-CustomFonts-support： https://github.com/sphilee/jsPDF-CustomFonts-support

次に-2番目のライブラリは、_default_vfs.js_という名前のファイルで少なくとも1つのカスタムフォントを提供する必要があります。私はtwoカスタムフォント-Arimo-Regular.ttfとArimo-Bold.ttf-両方ともGoogle Fontsを使用しています。したがって、私の_default_vfs.js_ファイルは次のようになります。

（

_(function (jsPDFAPI) { 
    "use strict";
    jsPDFAPI.addFileToVFS('Arimo-Regular.ttf','[Base64-encoded string of your font]');
    jsPDFAPI.addFileToVFS('Arimo-Bold.ttf','[Base64-encoded string of your font]');
})(jsPDF.API);
_

明らかに、使用しているフォントに応じて、バージョンが異なります。

フォントのBase64エンコード文字列を取得する方法はたくさんありますが、私はこれを使用しました： https://www.giftofspeed.com/base64-encoder/ 。

これにより、フォント.ttfファイルをアップロードでき、_default_vfs.js_に貼り付けることができるBase64文字列が提供されます。

フォントを使用すると、実際のファイルが次のように表示されます： https://cdn.rawgit.com/stuehler/jsPDF-CustomFonts-support/master/dist/default_vfs.js

したがって、フォントがそのファイルに保存されると、HTMLは次のようになります。

_    <script src="js/jspdf.min.js"></script>
    <script src="js/jspdf.customfonts.min.js"></script>
    <script src="js/default_vfs.js"></script>
_

最後に、JavaScriptコードは次のようになります。

_const doc = new jsPDF({
      unit: 'pt',
      orientation: 'p',
      lineHeight: 1.2
    });

doc.addFont("Arimo-Regular.ttf", "Arimo", "normal");
doc.addFont("Arimo-Bold.ttf", "Arimo", "bold");

doc.setFont("Arimo");
doc.setFontType("normal");
doc.setFontSize(28);

doc.text("Hello, World!", 100, 100);

doc.setFontType("bold");

doc.text("Hello, BOLD World!", 100, 150);

doc.save("customFonts.pdf");
_

これはおそらくほとんどの人にとって明らかですが、そのaddFont()メソッドでは、3つのパラメーターは次のとおりです。

  1. _default_vfs.js_ファイルのaddFileToVFS()関数で使用したフォントの名前
  2. JavaScriptのsetFont()関数で使用するフォントの名前
  3. JavaScriptのsetFontType()関数で使用するフォントのスタイル

これはここで動作していることがわかります： https://codepen.io/stuehler/pen/pZMdKo

これが私にとってもそうであったように、あなたにとってもうまくいくことを願っています。

2
mattstuehler