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.

 

 

Requirements

 

 

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.

 

 

app.ts

 

 

 

// To run this script with Deno:
//   deno run --allow-write --allow-net https://gist.githubusercontent.com/Hopding/29ebd6e73eb3436b94047bd29e9b9fd0/raw/pdf-lib-deno-fancy-script.ts

import { PDFDocument, rgb } from 'https://cdn.skypack.dev/pdf-lib@^1.11.1?dts';
import fontkit from 'https://cdn.skypack.dev/@pdf-lib/fontkit@^1.0.0?dts';

// Fetch an Ubuntu font
const url = 'https://pdf-lib.js.org/assets/ubuntu/Ubuntu-R.ttf';
const fontBytes = await fetch(url).then((res) => res.arrayBuffer());

// Fetch a JPG image
const jpgUrl = 'https://pdf-lib.js.org/assets/cat_riding_unicorn.jpg';
const jpgImageBytes = await fetch(jpgUrl).then((res) => res.arrayBuffer());

// Fetch a PNG image
const pngUrl = 'https://pdf-lib.js.org/assets/minions_banana_alpha.png';
const pngImageBytes = await fetch(pngUrl).then((res) => res.arrayBuffer());

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

// Embed the Ubuntu font
pdfDoc.registerFontkit(fontkit);
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
page.drawRectangle({
  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 pdfDoc.save();
await Deno.writeFile('fancy.pdf', pdfBytes);

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

 

See also  Build a Pacman Doodle Game With Music in Browser Using HTML5 CSS3 and 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

See also  HTML2PDF Example to Export Bootstrap 4 Form to PDF Document in Browser Using HTML5 & 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