web-dev-qa-db-ja.com

JSPDFカスタムフォント追加が機能しない

CSSコード

@font-face {
    font-family: Calibri;
    src: url("fonts/calibri.ttf");
    font-style: normal;
}

JSコード

doc.setFont('Calibri');
doc.setFontSize(7.5);
doc.setFontType("normal");
doc.text(10, 10, "Hi, How r u");

Calibri Fontを追加したいのですが、機能しません

含まれているjsスクリプトのリスト

<script src="/assets/global/scripts/jspdf/jspdf.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/acroform.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/from_html.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/addhtml.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/addimage.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/annotations.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/autoprint.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/canvas.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/cell.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/context2d.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/javascript.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/outline.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/prevent_scale_to_fit.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/split_text_to_size.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/standard_fonts_metrics.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/svg.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/total_pages.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/zlib.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/png.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/addimage.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/png_support.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/filesaver.js" type="text/javascript"></script>

CSS

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Apr 23, 2017, 12:57:52 PM
    Author     : common
*/

@font-face {
    font-family: Calibri;
    src: url("fonts/calibri.ttf");
    font-style: normal;
}

/*
@font-face {
    font-family: Calibri;
    src: url("fonts/calibrii.ttf");
    font-style: italic;
}

@font-face {
    font-family: Calibri;
    src: url("fonts/calibrib.ttf");
    font-style: normal;
    font-weight: bold;
}

@font-face {
    font-family: Calibri;
    src: url("fonts/calibriz.ttf");
    font-style: italic;
    font-weight: bold;
}*/
javascriptjspdf
11
Hardeep Singh

JsPdfバージョン1.4.0以降では、カスタムフォント（ttf）を使用する可能性があります。カスタムフォントはbase64でエンコードする必要があります。残念ながら、すべてのフォントが機能するとは限りません。

var doc = new jsPDF('landscape');

// to generate 'yourCustomFontTtfBase64Encoded' you can use 
// jsPDF-CustomFonts-support library (on their
// github page there are all instructions for that)
doc.addFileToVFS('yourCustomFont.ttf', 'yourCustomFontTtfBase64Encoded');

doc.addFont('yourCustomFont.ttf', 'yourCustomFont', 'normal');

doc.setFont('yourCustomFont');

「yourCustomFontTtfBase64Encoded」を生成するためのjsPDF-CustomFonts-supportライブラリは次のとおりです。 https://github.com/sphilee/jsPDF-CustomFonts-support

3
Vadi

こんにちは、このようなフォントを変更してみてください。

API.addFont = function(fontScript, font, style) {
      addFont(fontScript, font, style, 'StandardEncoding');
    };

上記の関数では、フォント変更の呼び出しの前にlib /に追加する必要がありますが、jspdfを読み込んだ直後にスクリプトタグを追加し、そのスクリプトタグにこの関数を追加することをお勧めします。

次に、フォントcssを追加する必要があります。

そして、このようにpdfのフォントを変更できます。

doc.addFont('fonts/calibri.ttf', 'Calibri', 'normal');
doc.setFont('Calibri');
doc.text(50,50,'Now this is Calibri');
1
MehulJoshi

これが私が使用しているソリューションです。うまく動作します（動作するcodepenについては以下を参照）...

最初に、他の人が述べたように、これらの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

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

1
mattstuehler

上記のように、jsPDF-CustomFonts-supportライブラリを https://github.com/sphilee/jsPDF-CustomFonts-support で使用できます。

READ.MEファイルには指示がありますが、私が行ったのはこれらの指示でした https://github.com/sphilee/jsPDF-CustomFonts-support/issues/16#issuecomment-307174041 ：

  1. .ttfフォントをFont Squirellにアップロードします https://www.fontsquirrel.com/tools/webfont-generator
  2. ダウンロードを押すと、新しい.ttfファイルを含む圧縮ファイルが取得されます。次に、base64にエンコードする必要があります https://www.giftofspeed.com/base64-encoder/ 。
  3. フォントのbase64コードを取得したら、jsPDF-CustomFonts-supportでダウンロードしたvfs_fonts.jsファイルに移動する必要があります https://github.com/sphilee/jsPDF-CustomFonts-support および '、'の1つの後、そのファイル内の異なるフォントを区切るために使用する必要があります： "YOUR_FONT_NAME.ttf"： "YOUR BASE64 CODE」、（引用符の後、最後にカンマで終わることを忘れないでください）。
  4. それができたら、関数docを追加できます。 addFont（ "YOUR_FONT_NAME.ttf"、 "YOUR_FONT_NAME.ttf"、 "normal"、 "WinAnsiEncoding"）。
0
tmsss

現時点ではできません。

ソースコード を見ると、フォントがわからない場合はtimesをフォントとして返すスイッチがあります。

switch (fontName) {
      case 'sans-serif':
      case 'verdana':
      case 'arial':
      case 'helvetica':
        fontName = 'helvetica';
        break;
      case 'fixed':
      case 'monospace':
      case 'terminal':
      case 'courier':
        fontName = 'courier';
        break;
      case 'serif':
      case 'cursive':
      case 'fantasy':
      default:
        fontName = 'times';
        break;
    }

そのフォントのいずれかを使用するか、ライブラリを編集してフォントをサポートできます。

それ以外の場合、カスタムフォントにサポートを追加する進行中のライブラリがあります： https://github.com/sphilee/jsPDF-CustomFonts-support

必要なファイルをすべて追加したら、次のように使用する必要があります。

doc.addFont('fonts/calibri.ttf', 'Calibri', 'Calibri-normal', 'normal');
0
rpadovani