JavaScript PDF - JavaScript

JavaScript is a versatile programming language used in web development, mobile application development, and server-side programming. PDF is a standard document format used across platforms, and JavaScript can be used to manipulate PDF documents.

In this article, we will explore the various ways JavaScript can be used with PDF documents.

PDF Libraries

There are several JavaScript libraries available for PDF manipulation, such as pdf.js, PDFKit, and jsPDF.

pdf.js

pdf.js is an open-source library created by Mozilla. It is a JavaScript library that allows developers to render PDF documents in a web browser using HTML5 Canvas. pdf.js also provides APIs for text extraction, document searching, and document navigation.

// Rendering a PDF document using pdf.js
const pdfUrl = 'https://example.com/my-document.pdf';
const pdfContainer = document.querySelector('.pdf-container');

pdfjsLib.getDocument(pdfUrl).promise.then((pdf) => {
  for (let i = 1; i <= pdf.numPages; i++) {
    pdf.getPage(i).then((page) => {
      const canvas = document.createElement('canvas');
      pdfContainer.appendChild(canvas);
      const ctx = canvas.getContext('2d');

      const viewport = page.getViewport({ scale: 1 });
      canvas.width = viewport.width;
      canvas.height = viewport.height;

      const renderContext = {
        canvasContext: ctx,
        viewport: viewport,
      };
      page.render(renderContext);
    });
  }
});

PDFKit

PDFKit is a Node.js library that can be used to generate PDF documents. It provides APIs for adding text, images, shapes, and other PDF elements.

// Creating a PDF document using PDFKit
const PDFDocument = require('pdfkit');
const fs = require('fs');

const doc = new PDFDocument();

doc.pipe(fs.createWriteStream('output.pdf'));

doc.text('Hello, world!').moveDown();
doc.text('This is a PDF generated using PDFKit.').moveDown();
doc.text('You can add images, shapes, and other elements to this document.').moveDown();

doc.end();

jsPDF

jsPDF is a client-side library that can be used to generate PDF documents. It provides APIs for adding text, images, shapes, and other PDF elements.

// Creating a PDF document using jsPDF
const doc = new jsPDF();

doc.text('Hello, world!', 10, 10);
doc.text('This is a PDF generated using jsPDF.', 10, 20);
doc.text('You can add images, shapes, and other elements to this document.', 10, 30);

doc.save('output.pdf');

PDF Forms

JavaScript can be used to manipulate PDF forms, such as filling out form fields, validating form data, and submitting form data.

Filling out PDF Forms

The pdf-lib library can be used to fill out PDF form fields.

// Filling out a PDF form using pdf-lib
const { PDFDocument, StandardFonts } = require('pdf-lib');
const fs = require('fs');

const pdfBytes = fs.readFileSync('my-form.pdf');
const pdfDoc = await PDFDocument.load(pdfBytes);
const form = pdfDoc.getForm();
const nameField = form.getTextField('Name');
nameField.setText('John Doe');

const pdfBytesWithFields = await pdfDoc.save();

fs.writeFileSync('output.pdf', pdfBytesWithFields);

Validating PDF Forms

JavaScript can be used to validate PDF form data before submission.

// Validating a PDF form using JavaScript
function validateForm() {
  const nameField = document.getElementById('name');
  const emailField = document.getElementById('email');

  if (nameField.value === '') {
    alert('Please enter your name.');
    return false;
  }

  if (emailField.value === '') {
    alert('Please enter your email address.');
    return false;
  }

  return true;
}

Submitting PDF Forms

The pdf-lib library can be used to submit PDF form data.

// Submitting a PDF form using pdf-lib
const { PDFDocument, StandardFonts } = require('pdf-lib');
const fetch = require('node-fetch');

const pdfBytes = fs.readFileSync('my-form.pdf');
const pdfDoc = await PDFDocument.load(pdfBytes);
const form = pdfDoc.getForm();
const nameField = form.getTextField('Name');
const emailField = form.getTextField('Email');

const formData = new FormData();
formData.append('name', nameField.getText());
formData.append('email', emailField.getText());

fetch('https://example.com/submit-form', {
  method: 'POST',
  body: formData,
}).then((response) => {
  console.log(response);
});

Conclusion

JavaScript is a powerful tool for working with PDF documents. Whether you need to render PDFs in a web browser, generate PDFs on the server-side, or manipulate PDF form data, there are many libraries and tools available to make the task easier.