How to Create a PDF document with Embedded Fonts and Images in Deno Using PDF-LIB Library Full Tutorial With Example


Welcome folks today in this blog post we will be looking at how to embed fonts and images inside pdf documents using deno and pdf-lib library. All the example source code will be given below.






For this you want Deno to be installed on your system.




Get Started



Now to get started you need to create a app.ts file inside your root directory and copy paste the following code which is shown below.







// To run this script with Deno:
//   deno run --allow-write --allow-net

import { PDFDocument, rgb } from '^1.11.1?dts';
import fontkit from '^1.0.0?dts';

// Fetch an Ubuntu font
const url = '';
const fontBytes = await fetch(url).then((res) => res.arrayBuffer());

// Fetch a JPG image
const jpgUrl = '';
const jpgImageBytes = await fetch(jpgUrl).then((res) => res.arrayBuffer());

// Fetch a PNG image
const pngUrl = '';
const pngImageBytes = await fetch(pngUrl).then((res) => res.arrayBuffer());

// Create a new PDFDocument
const pdfDoc = await PDFDocument.create();

// Embed the Ubuntu font
const customFont = await pdfDoc.embedFont(fontBytes);

// Embed the JPG and PNG images
const jpgImage = await pdfDoc.embedJpg(jpgImageBytes);
const pngImage = await pdfDoc.embedPng(pngImageBytes);

// Define and measure a string of text
const text = 'This is text in an embedded font!';
const textSize = 35;
const textWidth = customFont.widthOfTextAtSize(text, textSize);
const textHeight = customFont.heightAtSize(textSize);

// Get the image dimensions scaled to 50% of their original size
const jpgDims = jpgImage.scale(0.5);
const pngDims = pngImage.scale(0.5);

// Add a page to the PDFDocument
const page = pdfDoc.addPage();

// Draw the string of text on the page using the Ubuntu font
page.drawText(text, {
  x: 40,
  y: 450,
  size: textSize,
  font: customFont,
  color: rgb(0, 0.53, 0.71),

// Draw a rectangle around the text
  x: 40,
  y: 450,
  width: textWidth,
  height: textHeight,
  borderColor: rgb(1, 0, 0),
  borderWidth: 1.5,

// Draw the JPG image
page.drawImage(jpgImage, {
  x: page.getWidth() / 2 - jpgDims.width / 2,
  y: page.getHeight() / 2 - jpgDims.height / 2 + 250,
  width: jpgDims.width,
  height: jpgDims.height,

// Draw the PNG image
page.drawImage(pngImage, {
  x: page.getWidth() / 2 - pngDims.width / 2 + 25,
  y: page.getHeight() / 2 - pngDims.height + 125,
  width: pngDims.width,
  height: pngDims.height,

// Save the PDFDocument and write it to a file
const pdfBytes = await;
await Deno.writeFile('fancy.pdf', pdfBytes);

// Done! 💥
console.log('PDF file written to fancy.pdf');


READ  How to Capture Image and Take Selfie Picture From Webcamera and Save it as PNG File in Browser Using Vanilla Javascript Full Project For Beginners



Now if you execute this script by deno you need to execute the below command


deno run --allow-write --allow-net app.ts


So in this command we have used two flags


--allow-write flag is required to grant write permissions to deno to create a pdf file inside the system

READ  Build a HTML5 Full Screen Video Background in Browser Using Vanilla Javascript Full Project For Beginners


--allow-net flag is required to grant internet permission to deno so that it can download external fonts and images


Now if you execute this script by the above command you will see a fancy.pdf will be created inside the root directory






Now if you open this fancy.pdf file you will see the following result






Leave a Reply