vfs_fonts.js build tools下載vfs_fonts.js build tools源代碼下載

vfs_fonts.js build tools

字體下載

1.0.0

下載

中文字體vfs_fonts.js

用於解決pdfmake ， pdfHtml5， DataTables 創建pdf時中文亂碼問題

目前最小的支持中文的vfs_fonts.js base64編碼後的字體文件的創建小工具

默認集成了最小中文字體2個粗體樣式和普通樣式僅1.7M 應該是目前最小的中文字體了！！

使用方法

首先你需要安裝有node環境，目前所有的node版本v16，14，12，，10都可以

其次將你要生成的vfs字體文件放入到fonts文件夾中，然後運行cnpm install && npm run build 即可

cnpm install
# 构建 vfs_fonts.js 
npm run build

注意fonts文件夾下面的所有字體都將會被打包，如果不需要官方默認的Roboto字體，可以刪除Roboto-XXX 文件！

集成到你的項目中

修改package.json文件中對應的scripts構建腳本

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

build-vfs.js 存放字體的文件夾生成的vfs文件名

在DataTables 中使用pdfHtml5插件時支持pdf中文

pdfmake.js 文件中搜索var defaultClientFonts = {} 在這裡面註冊你生成的vfs字體，註冊字體名稱和對應字體樣式對應的字體{普通:xxx, 加粗:xxx, 斜體:xxx, 加粗斜體:xxx}，在使用的時候直接使用這裡註冊的字體名稱即可

 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'
	}
} ;

默認的配置

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

pdfHtml5使用示例

 <!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 >