vfs_fonts.js build tools - vfs_fonts.js build tools Téléchargement du code source

vfs_fonts.js build tools

Téléchargement de polices

1.0.0

Télécharger

Font chinois VFS_FONTS.JS

Utilisé pour résoudre le problème du code brouillé chinois lors de la création de pdfmake, pdfhtml5, dataTables

Actuellement le plus petit widget pour créer des fichiers de police après avoir pris en charge le codage VFS_FONTS.JS BASE64

Par défaut, la plus petite police chinoise est intégrée à 2 styles audacieux et styles ordinaires, qui ne mesurent que 1,7 m. Ce devrait être la plus petite police chinoise à l'heure actuelle! !

Comment utiliser

Tout d'abord, vous devez installer un environnement de nœud. Actuellement, toutes les versions de nœuds v16, 14, 12 et 10 sont bien.

Deuxièmement, mettez le fichier de police VFS que vous souhaitez générer dans le dossier Fonts, puis exécutez CNPM Install && npm Run build

cnpm install
# 构建 vfs_fonts.js 
npm run build

Notez que toutes les polices dans le dossier des polices seront emballées. Si vous n'avez pas besoin de la police Roboto par défaut officielle, vous pouvez supprimer le fichier roboto-xxx!

Intégrer dans votre projet

Modifiez le script Scripts Build correspondant dans le fichier package.json

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

Build-vfs.js Nom de fichier VFS généré par des dossiers qui stockent les polices

Prise en charge du PDF chinois lorsque vous utilisez le plugin PDFHTML5 dans les dataTables

Recherchez var defaultClientFonts = {} Dans le fichier pdfmake.js, enregistrez la police VFS que vous avez générée, enregistrez le nom de la police et le style de police correspondant correspondant au nom de police {normal: xxx, en gras: xxx, italique: xxx, italique gras: xxx}, et utilisation du nom de fonte enregistré ici directement lorsque vous l'utilisez.

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

Configuration par défaut

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

Exemple d'utilisation 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 >