admin管理员组文章数量:1318323
The standard method for installing custom font files is via the gulp tool, and that's described here: /
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.
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, remends against.
My application was Angular 8 setup generating check PDFs client-side. So I needed a MICR font for that. (Edit to add: still working on all the Angular versions up to current Angular 17.)
The solution to "how to use custom fonts" that I came up with is below.
Edit: Note that pdfmake v0.2.15 in late 2024 changed the VFS structure. Original is for v0.2.14 or lower, added v0.2.15.
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/
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.
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, remends against.
My application was Angular 8 setup generating check PDFs client-side. So I needed a MICR font for that. (Edit to add: still working on all the Angular versions up to current Angular 17.)
The solution to "how to use custom fonts" that I came up with is below.
Edit: Note that pdfmake v0.2.15 in late 2024 changed the VFS structure. Original is for v0.2.14 or lower, added v0.2.15.
Share Improve this question edited Nov 7, 2024 at 0:44 MotoRidingMelon asked Jun 20, 2020 at 2:02 MotoRidingMelonMotoRidingMelon 2,5672 gold badges22 silver badges29 bronze badges1 Answer
Reset to default 8- 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/ (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 file contains just this one line:
export const strGnuMICR:string = "AAEAAAALAIAAA.....FDAUQCQ1IAAAA=";
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'
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 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 // v0.2.14 or less pdfFonts['GnuMICR_b64']=strGnuMICR // v0.2.15 or more // 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(); }
Benefits:
- Don't have to install/fight the gulp tool
- Your fonts live in your code base, so they can be in version control
- Pretty easy
Drawbacks:
- You're not adding this font to the pdfmake "library" available systemwide, so you're doing this each time you write some code to make PDFs. If you're writing a jillion different PDF making utilities, the other methods might be better suited to to you. If you need to make just one, or a couple, not a big deal.
本文标签: javascriptHow can I use pdfmake custom fonts in Angular without using the gulp toolStack Overflow
版权声明:本文标题:javascript - How can I use pdfmake custom fonts in Angular without using the gulp tool? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742045299a2417747.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论