vfs_fonts.js build tools Download - vfs_fonts.js build tools Source code download

vfs_fonts.js build tools

Font download

1.0.0

Download

Chinese font vfs_fonts.js

Used to solve the problem of Chinese garbled code when creating pdfmake, pdfHtml5, DataTables

Currently the smallest widget to create font files after supporting Chinese vfs_fonts.js base64 encoding

By default, the smallest Chinese font is integrated with 2 bold styles and ordinary styles, which are only 1.7M. It should be the smallest Chinese font at present! !

How to use

First of all, you need to install a node environment. Currently, all node versions v16, 14, 12, and 10 are fine.

Secondly, put the vfs font file you want to generate into the fonts folder, and then run cnpm install && npm run build

cnpm install
# 构建 vfs_fonts.js 
npm run build

Note that all fonts under the fonts folder will be packaged. If you do not need the official default Roboto font, you can delete the Roboto-XXX file!

Integrate into your project

Modify the corresponding scripts build script in the package.json file

 "scripts" : {
    "build:vfs" : " node node_modules/pdfmake/build-vfs.js " ./fonts " " ./build/vfs_fonts.js " "
  },

build-vfs.js vfs file name generated by folders that store fonts

Support pdf Chinese when using the pdfHtml5 plugin in DataTables

Search for var defaultClientFonts = {} in the pdfmake.js file, register the vfs font you generated, register the font name and the corresponding font style corresponding to the font name {normal:xxx, bold:xxx, italic:xxx, bold italic:xxx}, and use the font name registered here directly when using it.

 var defaultClientFonts = {
	Hyzh : {
		normal : 'hyzjh_zh.ttf' ,
		bold : 'hylxt_bold.ttf' ,
		italics : 'hyzjh_zh.ttf' ,
		bolditalics : 'hylxt_bold.ttf'
	} ,
	Roboto : {
		normal : 'Roboto-Regular.ttf' ,
		bold : 'Roboto-Medium.ttf' ,
		italics : 'Roboto-Italic.ttf' ,
		bolditalics : 'Roboto-MediumItalic.ttf'
	}
} ;

Default configuration

 var defaultClientFonts = {
	Roboto : {
		normal : 'Roboto-Regular.ttf' ,
		bold : 'Roboto-Medium.ttf' ,
		italics : 'Roboto-Italic.ttf' ,
		bolditalics : 'Roboto-MediumItalic.ttf'
	}
} ;

pdfHtml5 usage example

 <!DOCTYPE html >
< html lang =" zh-CN " >
  < head >
  < meta charset =" utf-8 " >
  < title > Pdfmake export Chinese PDF </ title >
  < script src =" pdfmake.min.js " > </ script >
  < script src =" vfs_fonts.js " > </ script >
  < script >
  function down ( data ) {
            var doc = {
                content : [
                    data ,
                    'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
                ] ,
                defaultStyle : {
                    font : 'Hyzh' ,
                    fontSize : 12
                }
            } ;
            pdfMake . fonts = {
                Roboto : {
                    normal : 'Roboto-Regular.ttf' ,
                    bold : 'Roboto-Medium.ttf' ,
                    italics : 'Roboto-Italic.ttf' ,
                    bolditalics : 'Roboto-Italic.ttf'
                } ,
                Hyzh : {
					normal : 'hyzjh_zh.ttf' ,
					bold : 'hylxt_bold.ttf' ,
					italics : 'hyzjh_zh.ttf' ,
					bolditalics : 'hylxt_bold.ttf'
				}
            } ;
            pdfMake . createPdf ( doc ) . download ( ) ;
        }
  </ script >
  </ head >
  < body >
  < button onclick =" down('最小的支持中文显示的pdf生成工具') " >下载</ button >
  </ body >
</ html >