vfs_fonts.js build tools - vfs_fonts.js build tools

vfs_fonts.js build tools

Descarga de fuentes

1.0.0

Descargar

Fuente china vfs_fonts.js

Se utiliza para resolver el problema del código confuso chino al crear PDFMake, PDFHTML5, DataTables

Actualmente, el widget más pequeño para crear archivos de fuentes después de soportar la codificación china VFS_FONTS.JS BASE64

Por defecto, la fuente china más pequeña está integrada con 2 estilos en negrita y estilos ordinarios, que son solo 1,7 m. ¡Debería ser la fuente china más pequeña en la actualidad! !

Cómo usar

En primer lugar, debe instalar un entorno de nodo. Actualmente, todas las versiones de nodo V16, 14, 12 y 10 están bien.

En segundo lugar, coloque el archivo de fuente VFS que desea generar en la carpeta de fuentes y luego ejecute CNPM Install && NPM Ejecutar compilación

cnpm install
# 构建 vfs_fonts.js 
npm run build

Tenga en cuenta que todas las fuentes debajo de la carpeta de fuentes serán empaquetadas. Si no necesita la fuente Roboto predeterminada oficial, ¡puede eliminar el archivo Roboto-XXX!

Integre en su proyecto

Modifique los scripts correspondientes Built Script en el archivo Packle.json

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

Build-vfs.js VFS Nombre de archivo generado por carpetas que almacenan fuentes

Soporte de PDF Chino cuando use el complemento PDFHTML5 en DatateSables

Busque VAR defaultClientFonts = {} en el archivo pdfmake.js, registre la fuente de vfs que generó, registra el nombre de fuente y el estilo de fuente correspondiente correspondiente al nombre de fuentes {normal: xxx, negrita: xxx, italic: xxx, bold italic: xxx}, y use el nombre de fuente registrado aquí directamente cuando usa él.

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

Configuración predeterminada

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

Ejemplo de uso de 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 >