2016-11-17 3 views
1

Я использую pdfmake для создания PDF-файлов на стороне клиента. У нас есть редактор WYSIWYG, который позволяет пользователям создавать PDF-файлы. Затем он обрабатывается для работы с pdfmake.pdfmake - использование собственных шрифтов не работает

Однако я не могу нормально работать с шрифтами. Плагин использует vfs_fonts.js для создания шрифта в PDF, по умолчанию Roboto.

Я пытаюсь заставить его работать с подобными Times New Roman и т.д. и т.п.

Я попытался изменить файл так:

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 использовали те же шрифты, что и 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 
 
    ] 
 
}

Кто-нибудь еще использовал эту библиотеку? Если да, использовали ли вы пользовательские шрифты и как вы заставили их работать? Я могу опубликовать больше кода, если необходимо, спасибо

ответ

1

Документация Pdfmake о том, как использовать пользовательские шрифты на стороне клиента here.

Формат файла vfs_fonts.js что-то вроде:

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

Таким образом, вы должны определить его как следующее:

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:

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 как шрифт на вашем определении PDF, как вы сейчас делаете:

{ 
    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' 
     } 
    } 
} 
Смежные вопросы