PDF Maker es una biblioteca para generar documentos PDF en JavaScript.
Este proyecto está inspirado en pdfmake y se basa en pdf-lib y fontkit. No existiría sin el gran trabajo y el profundo conocimiento aportado por los autores de esos proyectos.
La función makePdf() crea datos PDF a partir de una definición de documento determinada. Esta definición es un objeto simple.
La propiedad más importante de la definición se denomina content . Esta propiedad acepta una lista de bloques . Hay diferentes tipos de bloques, como bloques de texto, bloques de imágenes, bloques de diseño de columnas y filas.
const fontData = await readFile ( 'Roboto-Regular.ttf' ) ;
const fontDataItalic = await readFile ( 'Roboto-Italic.ttf' ) ;
const pdfData = await makePdf ( {
// Fonts must be registered (see below)
fonts : {
Roboto : [ { data : fontData } , { data : fontDataItalic , italic : true } ] ,
} ,
// Content as an array of blocks
content : [
// Blocks can contain text and text properties
{ text : 'Lorem ipsum' , fontStyle : 'italic' , textAlign : 'center' , fontSize : 24 } ,
// Text can also be an array of text spans with different properties
{
text : [
'dolor sit amet, consectetur adipiscing elit ' ,
{ text : 'sed do eiusmod' , fontStyle : 'italic' } ,
' tempor, incididunt ut labore et dolore magna aliqua.' ,
] ,
} ,
] ,
} ) ;
await writeFile ( `hello.pdf` , pdfData ) ;Hay más ejemplos en la carpeta ejemplos/.
Todas las fuentes están incrustadas en el PDF y deben registrarse con la propiedad fonts . Se aceptan datos de fuentes en formato .ttf o .otf , como ArrayBuffer o Uint8Array. Cada familia de fuentes puede contener diferentes variantes que se seleccionan en función de las propiedades bold y italic . La familia de fuentes que se registra primero pasa a ser la predeterminada.
const documentDefinition = {
fonts : {
'DejaVu-Sans' : [
// Different font versions for fontFamily "DejaVu-Sans"
// TTF / OTF font data as ArrayBuffer or Uin8Array
{ data : fontDataDejaVuSansNormal } ,
{ data : fontDataDejaVuSansBold , bold : true } ,
{ data : fontDataDejaVuSansItalic , italic : true } ,
{ data : fontDataDejaVuSansBoldItalic , bold : true , italic : true } ,
] ,
Roboto : [
// Different font versions for fontFamily "Roboto"
{ data : fontDataRobotoNormal } ,
{ data : fontDataRobotoMedium , bold : true } ,
] ,
} ,
content : [
{ text : 'lorem ipsum' , fontFamily : 'Roboto' , fontWeight : 'bold' } , // will use Roboto Medium
{ text : 'dolor sit amet' } , // will use DejaVu-Sans (the font registered first), normal
] ,
} ; Se admiten imágenes JPG y PNG. Cuando la misma imagen se utiliza más de una vez, los datos de la imagen solo se incluyen una vez en el PDF. El tamaño de una imagen se puede limitar utilizando las propiedades width y height .
// An image block
{ image : 'images/logo.png' , width : 200 , height : 100 } , Para organizar bloques horizontalmente, se pueden incluir en un bloque con una propiedad columns . Cuando las columnas tienen una propiedad width , se respeta. El espacio restante se distribuye uniformemente en todas las columnas.
{
columns : [
{ text : 'Column 1' , width : 100 } , // 100 pt wide
{ text : 'Column 2' } , // gets half of the remaining width
{ text : 'Column 3' } , // gets half of the remaining width
] ,
}Se puede utilizar un diseño de filas para agrupar varias filas en un solo bloque, por ejemplo, para aplicar propiedades comunes o encerrar filas en un diseño de columnas circundantes.
{
rows : [
{ text : 'Row 1' } ,
{ text : 'Row 2' } ,
{ text : 'Row 3' } ,
] ,
textAlign : 'right' ,
} Cada bloque puede tener una propiedad graphics que acepte una lista de formas para dibujar en ese bloque o una función que devuelva una lista de formas. La función se llamará con el ancho y alto del bloque. Esto se puede utilizar para dibujar formas que dependen del tamaño del bloque.
Las formas pueden ser líneas, rectángulos, círculos o trazados SVG. En el siguiente ejemplo, se utiliza una propiedad de gráficos para dibujar un fondo amarillo detrás del texto y un borde azul en el borde izquierdo.
{
text : 'Lorem ipsum' ,
graphics : ( { width , height } ) => [
{ type : 'rect' , x : 0 , y : 0 , width , height , fillColor : 'yellow' } ,
{ type : 'line' , x1 : 0 , y1 : 0 , x2 : 0 , y2 : height , lineColor : 'blue' , lineWidth : 2 } ,
] ,
padding : { left : 5 } ,
}Vea también el ejemplo de gráficos.
La propiedad margin se puede utilizar para agregar espacio alrededor de los bloques. Acepta un valor único (se aplica a los cuatro bordes) un objeto con cualquiera de las propiedades top , right , bottom , left , x e y . Las propiedades x se pueden utilizar como abreviaturas para establecer tanto y left como right o top e bottom al mismo tiempo. Los valores se pueden dar como números (en puntos) o como cadenas con una unidad. Si se proporciona una cadena, debe contener una de las unidades pt , in , mm o cm ;
{
margin : { x : 5 , top : 10 } ,
content : [
{ text : 'Lorem ipsum' } ,
{ text : 'dolor sit amet' } ,
] ,
} Los márgenes top e bottom de los bloques adyacentes se contraen en un único margen cuyo tamaño es el máximo de los dos márgenes. Los márgenes de las columnas no colapsan.
La propiedad padding se puede utilizar para agregar espacio entre el contenido y los bordes de los bloques.
La propiedad pageSize de nivel superior se puede utilizar para establecer el tamaño de la página. Se admiten varios tamaños estándar, como A4 , Letter y Legal . El valor predeterminado es A4. Se puede especificar un tamaño de página personalizado como un objeto con las propiedades width y height . Los valores se pueden dar como números (en puntos) o como cadenas con una unidad.
{
pageSize : { width : '20cm' , height : '20cm' }
} La propiedad pageOrientation se puede utilizar para establecer la orientación de la página. El valor puede ser portrait u landscape . El valor predeterminado es retrato.
{
pageSize : 'A5' ,
pageOrientation : 'landscape' ,
content : [
{ text : 'Lorem ipsum' } ,
{ text : 'dolor sit amet' } ,
] ,
} Los encabezados y pies de página que se repiten en cada página se pueden definir utilizando las propiedades opcionales header y footer . Ambos aceptan un solo bloque o una función que devuelve un bloque. La función se llamará con el número de página y el número total de páginas. El número de página comienza en 1.
{
footer : ( { pageNumber , pageCount } ) => ( {
text : `Page ${ pageNumber } of ${ pageCount } ` ,
textAlign : 'right' ,
margin : { x : '20mm' , bottom : '1cm' } ,
} ) ,
content : [
{ text : 'Lorem ipsum' } ,
{ text : 'dolor sit amet' } ,
] ,
} Los saltos de página se incluyen automáticamente. Cuando un bloque no cabe en la página actual, se agrega una nueva página al documento. Para insertar un salto de página antes o después de un bloque, establezca la propiedad breakBefore o breakAfter de un bloque en always . Para evitar un salto de página, configure esta propiedad para avoid .
Los saltos de página también se insertan automáticamente entre las líneas de un bloque de texto. Para evitar un salto de página dentro de un bloque de texto, establezca la propiedad breakInside para avoid .
{
content : [
{ text : 'Lorem ipsum' } ,
{ text : 'This text will go on a new page' , breakBefore : 'always' } ,
] ,
} Si bien aún no se ha generado documentación, puede consultar la carpeta api para obtener una especificación de todas las propiedades admitidas en una definición de documento.
Consulte también los ejemplos en la carpeta ejemplos/.
MIT
