pdfmake - 独自のフォントが使用できない

Question

私はpdfmakeを使ってクライアント側でPDFを作成しています。私たちは、ユーザがpdfを作成できるようにするWYSIWYGエディタを持っています。これはpdfmakeで動作するように解析されます。

しかし、私は正常なフォントを動作させることができません。プラグインはvfs_fonts.jsを使用してPDF上にフォントを作成します。デフォルトはRobotoです。

window.pdfMake = window.pdfMake || {}; 
 
window.pdfMake.vfs = { 
 
    Roboto: { 
 
\t \t "Roboto-Italic.ttf": "BASE 64 HERE", 
 
     "Roboto-Medium.ttf": "BASE 64 HERE", 
 
     "Roboto-Regular.ttf": "BASE 64 HERE" 
 
    }, 
 
    TimesNewRoman: { 
 
     "Roboto-Italic.ttf": "BASE 64 HERE", 
 
     "Roboto-Medium.ttf": "BASE 64 HERE", 
 
     "Roboto-Regular.ttf": "BASE 64 HERE" 
 
    } 
 
}

I：

私はそれがのTimes New Romanなどなど私はこのようなファイルを変更しようとしてい

の同類で動作するように取得しようとしていますRobotoと同じフォントをテストとして使用していますが、それでも動作しません。ここに私が戻ってくるエラーです

Uncaught Error: No unicode cmap for font 

私のコードは以下のとおりです。あなたはpdf tester hereにこの文字列を貼り付けた結果

{ 
 
    "content":[ 
 
     { 
 
     "stack":[ 
 
      { 
 
       "text":[ 
 
        { 
 
        "text":"" 
 
        } 
 
       ] 
 
      }, 
 
      { 
 
       "text":"ygjjkjgjkhjkjghk", 
 
       "style":"style_2", 
 
       "lineHeight":"1" 
 
      } 
 
     ], 
 
     "style":"style_1" 
 
     }, 
 
     { 
 
     "stack":[ 
 
      { 
 
       "text":[ 
 
        { 
 
        "text":"" 
 
        } 
 
       ] 
 
      }, 
 
      { 
 
       "text":" ", 
 
       "style":"style_4", 
 
       "lineHeight":"1" 
 
      } 
 
     ], 
 
     "style":"style_3" 
 
     }, 
 
     { 
 
     "stack":[ 
 
      { 
 
       "text":[ 
 
        { 
 
        "text":"" 
 
        } 
 
       ] 
 
      }, 
 
      { 
 
       "text":"", 
 
       "style":"style_7", 
 
       "font":"TimesNewRoman", 
 
       "lineHeight":"1" 
 
      }, 
 
      { 
 
       "text":"sdfghfdghfghdgfgfh", 
 
       "style":"style_8", 
 
       "font":"TimesNewRoman", 
 
       "lineHeight":"1" 
 
      } 
 
     ], 
 
     "style":"style_5" 
 
     } 
 
    ], 
 
    "styles":{ 
 
     "style_1":{ 
 
     "opacity":"1" 
 
     }, 
 
     "style_2":{ 
 
     "opacity":"1" 
 
     }, 
 
     "style_3":{ 
 
     "opacity":"1" 
 
     }, 
 
     "style_4":{ 
 
     "opacity":"1" 
 
     }, 
 
     "style_5":{ 
 
     "opacity":"1" 
 
     }, 
 
     "style_6":{ 
 
     "opacity":"1" 
 
     }, 
 
     "style_7":{ 
 
     "font":"TimesNewRoman", 
 
     "opacity":"1" 
 
     }, 
 
     "style_8":{ 
 
     "opacity":"1" 
 
     } 
 
    }, 
 
    "pageSize":"A4", 
 
    "pageOrientation":"portrait", 
 
    "pageMargins":[ 
 
     40, 
 
     20, 
 
     40, 
 
     20 
 
    ] 
 
}

は誰にもこのライブラリを使用しています参照してください？そうであれば、カスタムフォントを使用しましたが、どうやってそれらを動作させましたか？私は、必要に応じて、より多くのコードを投稿することができます。

Answer 1

クライアント側でカスタムフォントを使用する方法については、hereのドキュメントを参照してください。その後

window.pdfMake.vfs["Times-New-Roman-Regular.ttf"] = "BASE 64 HERE"; 
window.pdfMake.vfs["Times-New-Roman-Medium.ttf"] = "BASE 64 HERE"; 
window.pdfMake.vfs["Times-New-Roman-Italic.ttf"] = "BASE 64 HERE"; 

を、あなたはまだpdfMake.fontsを割り当てる必要があります。そのため

this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = { 
    "Roboto-Italic.ttf": "AAEAAAASAQAABAAgR0RFRtRX1" 
} 

、あなたは次のように定義する必要があります

vfs_fonts.jsファイル形式は、のようなものがあります：

pdfMake.fonts = { 
    // Default font should still be available 
    Roboto: { 
     normal: 'Roboto-Regular.ttf', 
     bold: 'Roboto-Medium.ttf', 
     italics: 'Roboto-Italic.ttf', 
     bolditalics: 'Roboto-Italic.ttf' 
    }, 
    // Make sure you define all 4 components - normal, bold, italics, bolditalics - (even if they all point to the same font file) 
    TimesNewRoman: { 
     normal: 'Times-New-Roman-Regular.ttf', 
     bold: 'Times-New-Roman-Bold.ttf', 
     italics: 'Times-New-Roman-Italics.ttf', 
     bolditalics: 'Times-New-Roman-Italics.ttf' 
    } 
}; 

その後、あなたはRobotとTimesNewRomanの両方を使用することができます

{ 
    content:[ 
     { 
     text: 'some text using Roboto font' 
     style: 'style_1' 
     }, 
     { 
     text: 'some text using Times New Roman font' 
     font: 'TimesNewRoman' 
     } 
    ], 
    styles:{ 
     style_1:{ 
     opacity: '1', 
     font: 'Roboto' 
     } 
    } 
} 

のように、あなたのPDF定義のフォントとして