0
1.5K
Vistaspdf-lib: cómo agregar una fuente personalizada
Mi entorno es el nodo v12.16.1 con mecanografiado agregado.
Estoy usando pdf-lib v1.16.0 ( https://www.npmjs.com/package/pdf-lib ) para completar el formulario para el archivo PDF dado. El código fuente de la biblioteca se puede encontrar aquí https://github.com/Hopding/pdf-lib y más en los documentos aquí https://pdf-lib.js.org/ .
Con respecto a las fuentes pdf-lib tiene un conjunto llamado StandardFonts que se proporciona dentro de lib.
export enum StandardFonts { Courier = 'Courier', CourierBold = 'Courier-Bold', CourierOblique = 'Courier-Oblique', CourierBoldOblique = 'Courier-BoldOblique', Helvetica = 'Helvetica', HelveticaBold = 'Helvetica-Bold', HelveticaOblique = 'Helvetica-Oblique', HelveticaBoldOblique = 'Helvetica-BoldOblique', TimesRoman = 'Times-Roman', TimesRomanBold = 'Times-Bold', TimesRomanItalic = 'Times-Italic', TimesRomanBoldItalic = 'Times-BoldItalic', Symbol = 'Symbol', ZapfDingbats = 'ZapfDingbats', }Muy a menudo tendría el requisito de aplicar una fuente que no está en la lista. Un ejemplo es cuando tiene algunos documentos/formularios de usuario para completar y luego aplicar una firma electrónica para aprobarlos. En ocasiones esa firma electrónica puede ser de otro tipo de letra, elegido por el usuario.
Entonces, ¿cómo podemos agregar un nuevo tipo de fuente de nuestra elección?
2 Respuestas
Responde la pregunta0
De las especificaciones https://www.npmjs.com/package/pdf-lib#embed-font-and-measure-text
pdf-lib se basa en un módulo hermano para admitir la incrustación de fuentes personalizadas: @pdf-lib/fontkit. Debe agregar el módulo @pdf-lib/fontkit a su proyecto y registrarlo usando pdfDoc.registerFontkit(...) antes de incrustar fuentes personalizadas.
Tenemos que npm i --save @pdf-lib/fontkit y tenemos que tener una fuente desde donde leeremos la fuente. En mi caso, agregué el archivo .otf en el proyecto y cargué la fuente. Los archivos están estructurados como en la imagen: 
import path from 'path'; import fs from 'fs'; import {PDFDocument, PDFForm, StandardFonts, PDFFont} from 'pdf-lib'; import fontkit from '@pdf-lib/fontkit'; const pdfBytes = fs.readFileSync(path.join(__dirname, `/w_template/` + fileName + '.pdf')); const pdfDoc = await PDFDocument.load(pdfBytes); pdfDoc.registerFontkit(fontkit); //load font and embed it to pdf document const fontBytes = fs.readFileSync(path.join(__dirname, 'HouschkaHead-BoldItalic.otf')); const customFont = await pdfDoc.embedFont(fontBytes); const form = pdfDoc.getForm(); const textField = form.getTextField('signature'); textField.setFontSize(11); textField.setText('stefan z'); textField.updateAppearances(customFont); // form flatten is available from v1.16.0 and it makes form read-only (not editable) form.flatten(); const modifiedPdf = await pdfDoc.save(); Y este es el resultado final: compruebe cómo el campo del formulario de entrada de firma es diferente del resto de los campos de entrada que se rellenan con la fuente predeterminada 
Bonificación: si desea jugar con el color del texto de las entradas en el formulario, esto es lo que encontré mientras buscaba más en el código fuente de la biblioteca (puede que no sea óptimo, pero puede brindarle un punto de partida para más cosas):
import {setFillingRgbColor} from 'pdf-lib' const textField = form.getTextField(fieldName); const da = textField.acroField.getDefaultAppearance() ?? ''; const newDa = da + '\n' + setFillingRgbColor(1, 0, 0).toString(); textField.acroField.setDefaultAppearance(newDa); 
0
Si alguien tiene dificultades para cambiar el fontSize de fuente al completar los campos de texto utilizando la última función incorporada llamada setFontSize() . Puede utilizar este enfoque.
const { PDFDocument, setFontAndSize } = require('pdf-lib'); const pdfDoc = await PDFDocument.load(file); const form = pdfDoc.getForm(); const textField = form.getTextField('106Mobile.1'); textField.setText('This works fine'); const da = textField.acroField.getDefaultAppearance() ?? ''; const newDa = da + '\n' + setFontAndSize('Courier', 8).toString(); //setFontAndSize() method came to resuce textField.acroField.setDefaultAppearance(newDa);Tuve que usar esto porque recibí un error que decía
No se encontró ninguna entrada /DA (aspecto predeterminado) para el campo: 106Title.1
al configurar los tamaños de fuente para algunos campos de texto (no todos). Pero degeneradamente tenía esos campos de texto. Se arregló usando la solución anterior.