Как я могу использовать пользовательские шрифты pdfmake в Angular без использования инструмента gulp? - PullRequest
Новая
       79

Как я могу использовать пользовательские шрифты pdfmake в Angular без использования инструмента gulp?

1 голос
/ 20 июня 2020

Стандартный метод установки файлов пользовательских шрифтов - через инструмент gulp, и он описан здесь: https://pdfmake.github.io/docs/fonts/custom-fonts-client-side/

Но если это не поможет вам, и мне Windows это похоже на кроличью нору, наверняка есть другой способ получить данные на месте. Да.

Вариант 1 заключается в изменении vsf_fonts. js и pdfmake. js в каталоге node_modules / pdfmake / build. В первом вы собираетесь добавить свои данные, а во втором - изменить объект defaultClientFonts. Я признаю, что оставляю это немного расплывчатым, потому что проблема в том, что если вы когда-нибудь запустите "npm update" или подобное, вы уничтожите все эти изменения, вариант 2 ниже намного лучше, поскольку он оставляет все только код акций, и в конечном итоге это проще. Нет необходимости подробно и точно описывать метод, который может работать, против которого я, вероятно, все остальные рекомендую.

Мое приложение было установкой Angular 8/9, генерирующей клиент проверки PDF-файлов -сторона. Так что для этого мне понадобился шрифт MICR.

Решение «как использовать собственные шрифты», которое я придумал, приведено ниже.

1 Ответ

2 голосов
/ 20 июня 2020
  • Во-первых, вам нужно получить шрифт ttf и преобразовать его во что-нибудь пригодное для использования. Base64 закодирует его с помощью такого инструмента, как https://www.base64decode.org/ (обязательно переключитесь на encode и прокрутите немного вниз, чтобы поместить туда файл)
  • Теперь у вас есть файл вроде: "encoded-20200619201035.txt"
  • Создайте новый файл, я назвал свой GnuMICR.ttf.Base64.encoded.ts
  • Скопируйте / вставьте все содержимое вашего закодированного файла в экспортируемую вами переменную. MICR - это крошечный шрифт, длина которого превышает 6000 символов, поэтому ".....", как вы видите, есть 6000 чартов, которыми я не взрываю stackoverflow, что сделало бы его нечитаемым

Файл GnuMICR.ttf.Base64.encoded.ts содержит только одну строку: 

export const strGnuMICR:string = "AAEAAAALAIAAA.....FDAUQCQ1IAAAA=";

Теперь в основном коде, с которым вы работаете, вам нужен обычный pdfmake, включенный в вверху: 

import pdfMake       from 'pdfmake/build/pdfmake'
import pdfFonts      from 'pdfmake/build/vfs_fonts'

, а также импорт вашего шрифта (мой был в подкаталоге, который я создал под названием fonts. Не используйте подкаталог assets, он будет работать в dev, но выиграл для правильной сборки): 

import { strGnuMICR } from './../../fonts/GnuMICR.ttf.Base64.encoded'

pdfmake говорит о «виртуальной файловой системе», и это подразумевается, когда вы видите переменную « vfs _fonts ", но на самом деле это просто массив. Вы также увидите, что по умолчанию используются имена файлов, такие как «Roboto-Regular.ttf», но опять же, это не файл в виртуальной файловой системе: «Roboto-Regular.ttf» - это просто имя данных в vfs_fonts. js массив. Для ясности, вы ничего не делаете с реальными файлами, все это использует переменную в кодировке base64, которую вы уже создали. 1036 * 

 generatePDF(){
 
 // this adds our base64 encoded data to the existing 'virtual file system'
 pdfFonts.pdfMake.vfs['GnuMICR_b64']=strGnuMICR
 
 // you're going to wipe out the standard stuff when you create this
 // variable, so we need to add the stock Roboto fonts back in. I 
 // set all fonts to the same thing, as "italic MICR" would be silly. 
 pdfMake.fonts = {
     Roboto: {
         normal:      'Roboto-Regular.ttf',
         bold:        'Roboto-Medium.ttf',
         italics:     'Roboto-Italic.ttf',
         bolditalics: 'Roboto-MediumItalic.ttf'
     },
     GnuMICR:{
         normal:      'GnuMICR_b64',
         bold:        'GnuMICR_b64',
         italics:     'GnuMICR_b64',
         bolditalics: 'GnuMICR_b64'
     },
 }
 // that's it, all the install work is done
 
 // build the pdf, using our new font via a style we define
 let docDefinition = 
     {
     content: [
         {text:'regular Roboto text'},
         {text:'and a line of MICR text follows:'},
         {text:'C11111111C A222222222A 333333333C 0123456789',style:'micr'},
         ],
     styles:{
         micr:{
             font: 'GnuMICR',
             fontSize: 12,
             }
         },
      defaultStyle:{
          font: 'Roboto',
          fontSize: 15,
          }
      };
 
     // annnnnnd generate that PDF!!
     pdfMake.createPdf(docDefinition).open();
  }

Преимущества:

  • Не нужно устанавливать / бороться с инструментом gulp
  • Ваши шрифты живут в базе вашего кода, поэтому они могут быть в системе контроля версий
  • Довольно просто

Недостатки:

  • Вы не добавляете этот шрифт в «библиотеку» pdfmake, доступную для всей системы, поэтому вы делаем это каждый раз, когда пишете код для создания PDF-файлов. Если вы пишете миллион различных утилит для создания PDF-файлов, вам могут больше подойти другие методы. Если вам нужно сделать всего одну или пару, не беда.
...