如何在不使用gulp工具的情况下在Angular中使用pdfmake自定义字体? [英] How can I use pdfmake custom fonts in Angular without using the gulp tool?

问题描述

安装自定义字体文件的标准方法是通过gulp工具，在此进行了描述: https://pdfmake.github.io/docs/fonts/custom -fonts-client-side/

The standard method for installing custom font files is via the gulp tool, and that's described here: https://pdfmake.github.io/docs/fonts/custom-fonts-client-side/

但是，如果这对您失败，并且对于Windows上的我来说，这似乎是个难题，那么肯定会有另一种方式来获取数据.是的

But if that fails for you, and for me on Windows it seemed to be a rabbit hole, surely there's another way to get the data in place. Yep.

选项1是修改node_modules/pdfmake/build目录中的vsf_fonts.js 和 pdfmake.js.在第一个中，您将添加数据，在第二个中，您将修改defaultClientFonts对象.我承认我的说法有点含糊，因为问题是，如果您运行过"npm更新"或类似程序，您将清除所有这些更改，下面的选项2更好，因为它保留了所有股票代码一个人，最终变得更简单.无需冗长而准确地描述可以起作用的方法，我(可能是其他所有人)都建议反对.

Option 1 is to modify the vsf_fonts.js and pdfmake.js in the node_modules/pdfmake/build directory. In the first you're going to add your data, and in the second your're going to modify the defaultClientFonts object. I admit I'm leaving that a bit vague because the problem is, if you ever run a "npm update" or similar, you'll wipe out all those changes, option 2 below is much better, as it leaves all the stock code alone, and ultimately it's simpler. No need to verbosely and exactly describe a method that can work, that I, probably everyone else, recommends against.

我的应用程序是一个Angular 8/9安装程序，可在客户端生成检查PDF.所以我需要一个MICR字体.

My application was an Angular 8/9 setup generating check PDFs client-side. So I needed a MICR font for that.

我想到的如何使用自定义字体"的解决方案如下.

The solution to "how to use custom fonts" that I came up with is below.

推荐答案

• 首先，您需要获取ttf字体，并将其转换为 有用的东西. Base64使用类似的工具对其进行编码 https://www.base64decode.org/(请确保切换为 encode >和 向下滚动以将文件拖放到那里
• 现在您有一个类似的文件:"encoded-20200619201035.txt"
• 创建一个新文件，我将其命名为GnuMICR.ttf.Base64.encoded.ts
• 将其中编码文件的全部内容复制/粘贴到导出的变量中. MICR是一种很小的字体，长度超过6,000个字符，因此"....."您会看到有6,000个租船合同，但我并没有因此而感到不满
• First, you're going to need to get your ttf font, and convert it to something usable. Base64 encode it using a tool like https://www.base64decode.org/ (be sure to switch to encode and scroll down a bit to drop a file on there)
• Now you have a file like: "encoded-20200619201035.txt"
• Create a new file, I called my GnuMICR.ttf.Base64.encoded.ts
• Copy/paste the entire contents of your encoded file in there into a variable you export. MICR is a tiny font and it's over 6,000 characters long, so the "....." you see there is the 6,000 charters I'm not blowing up stackoverflow with that would make this unreadable

GnuMICR.ttf.Base64.encoded.ts文件仅包含这一行:

GnuMICR.ttf.Base64.encoded.ts file contains just this one line:

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

现在，在使用的主要代码中，您需要在顶部包含常规pdfmake:

Now in the main code you're working in, you need the regular pdfmake includes at the top:

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

以及导入字体(我的文件夹位于我创建的名为fonts的子目录中.请勿使用assets子目录，该子目录可在dev中使用，但不会被引入以进行正确的构建):

as well as importing your font (mine was in a subdirectory I made called fonts. Don't use the assets subdirectory, that will work in dev, but won't get pulled in for proper builds):

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

pdfmake讨论了虚拟文件系统".当您看到变量" vfs _fonts"但实际上，它只是一个数组.您还将看到默认值是像'Roboto-Regular.ttf'这样的文件名，但这又不是虚拟文件系统上的文件:'Roboto-Regular.ttf'只是vfs_fonts.js数组中数据的名称. .为了清楚起见，您对实际文件不做任何事情，而是使用已经构建的base64编码变量.

pdfmake talks about a "virtual file system" and that's implied when you see the variable "vfs_fonts" but really, it's just an array. You'll also see that the defaults are filenames like 'Roboto-Regular.ttf' but again that's not a file on a virtual file system: 'Roboto-Regular.ttf' is just the name of the data in the vfs_fonts.js array. For clarity, you're not doing anything with actual files, it's all using the base64 encoded variable you've built already.

在您的主要代码中进行工作的地方:

Down to where you're doing the work in your main code:

 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();
  }      

好处:

• 不必安装/打牙胶工具
• 您的字体位于您的代码库中，因此可以在版本控制中
• 非常简单

缺点:

• 您没有将此字体添加到pdfmake的"library"库中.在整个系统范围内都可用，因此每次编写一些代码来制作PDF时，您都要执行此操作.如果您要编写数十亿种不同的PDF制作实用程序，则其他方法可能更适合您.如果您只需要制作一个或几个，就没什么大不了了.

这篇关于如何在不使用gulp工具的情况下在Angular中使用pdfmake自定义字体?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！