pdfmake - mit eigenen Schriften funktioniert nicht

Question

Ich benutze pdfmake um PDFs auf der Client-Seite zu erstellen. Wir haben einen WYSIWYG-Editor, mit dem die Benutzer ein PDF erstellen können. Dies wird dann analysiert, um mit dem pdfmake zu arbeiten.

Allerdings kann ich normale Schriftarten nicht funktionieren. Das Plugin verwendet vfs_fonts.js, um die Schriftart in der PDF zu erstellen, standardmäßig ist Roboto.

Ich versuche es mit Größen wie Times New Roman etc etc.

ich die Datei so zu ändern, haben zur Arbeit zu kommen versucht:

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 habe die gleichen Schriften wie der Roboto als Test verwendet, funktioniert aber immer noch nicht. Hier ist der Fehler Ich bekomme zurück

Uncaught Error: No unicode cmap for font 

Hier ist mein Code unten. Sie fügen diese Zeichenfolge in das pdf tester here und das Ergebnis

{ 
 
    "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 
 
    ] 
 
}

Hat jemand anderes diese Bibliothek verwendet sehen? Wenn ja, haben Sie benutzerdefinierte Schriftarten verwendet und wie haben Sie sie zur Arbeit gebracht? Ich kann mehr Code bei Bedarf posten, danke

Answer 1

Pdfmake Dokumentation zur Verwendung von benutzerdefinierten Schriftarten auf der Client-Seite here.

Die vfs_fonts.js Dateiformat ist so etwas wie:

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

Daher sollten Sie es wie die folgende Definition:

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"; 

Danach müssen Sie noch pdfMake.fonts zuweisen:

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' 
    } 
}; 

Dann können Sie sowohl Robot verwenden und TimesNewRoman als Schriftart auf Ihrer PDF-Definition, wie Sie jetzt tun:

{ 
    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' 
     } 
    } 
}