How to generate pdf file using pdfmake module?

In this article, we’ll learn about How to generate pdf file with header and footer in client side using pdfmake module?

1. Install pdfmake module.

yarn add pdfmake

2. Import pdfmake and pdffonts.

import pdfMake from "pdfmake/build/pdfmake";
import pdfFonts from "pdfmake/build/vfs_fonts";

pdfMake.vfs = pdfFonts.pdfMake.vfs;
pdfMake.fonts = {
  'Roboto': {
    normal: 'Roboto-Regular.ttf',
    bold: 'Roboto-Medium.ttf',
    italics: 'Roboto-Italic.ttf',
    bolditalics: 'Roboto-Italic.ttf'
  }
};

3. Write a separate function, where we’ll prepare content of pdf-file.

I have written this function separately, so we can defined pdf body content at one place and other common properties like header, footer, pageSize, pageMargin, etc. in main function.

/**
 * @desc pdf content
 * @param {Array} sections
 * @param {Number} pageWidth Width in inches
 * @param {Number} pageHeight Width in inches
 * @return title, pageSize, content, pageMargin
 * */
const pdfContent = (sections, pageWidth, pageHeight) => {
  const pageSize = {
    width: pageWidth * 72,
    height: pageHeight * 72
  };
  const imageWidth = 1.0;
  const imagePercentage = 70;
  const pageMargins = [40, 60, 40, 60];
  let content = [];
  sections.forEach((section, si) => {
      content.push({
        text: section.heading || `Section ${si + 1}`,
        fontSize: 20,
        alignment: 'center',
        margin: [15, 15],
        // If it is the first section, do not insert a pageBreak.
        pageBreak: si === 0 ? null : 'before'
      });
      section.images.forEach((image, j) => {
        content.push({
          image,
          alignment: 'center',
          width: (pageSize.width * imageWidth) * imagePercentage / 100,
          pageBreak: j !== 0 ? 'before' : null
        });
    });
  });
  return {
    pageSize,
    content,
    pageMargins
  }
};

While showing content, we have used alignment, width, margin and pageBreak properties.

We have used text and images for contents. While using text, we can set fontSize property also along with other properties.

4. Write a main function, where we’ll use this content and generate pdf file with defining common pdf properties.

/**
 * @desc Print pdf for the puzzles
 * @param {Array} sections
 * @param {Number} pageWidth Width in inches
 * @param {Number} pageHeight Width in inches
 * */
const PrintPdf = (sections, pageWidth, pageHeight) => {
  const {pageSize, content, pageMargins} = pdfContent(sections, pageWidth, pageHeight);
  const docDefinition = {
    pageSize,
    content: content,
    pageMargins,
    footer: function (currentPage, pageCount) {
      return {
        text: "Page " + currentPage.toString() + ' of ' + pageCount,
        alignment: currentPage % 2 === 0 ? 'left' : 'right',
        style: 'normalText',
        margin: [10, 10, 10, 10]
      };
    },
  };

  // console.log(docDefinition);
  pdfMake.createPdf(docDefinition).download(`pdf-${+new Date()}.pdf`);
};

In above docDefinition variable, declared pageSize (width & height), pageMargins, content and footer.

The way we have used footer, similarly we can add header.

There is other functions available for createPdf.

i) Open pdf in same window:

pdfMake.createPdf(docDefinition).open({}, window);

ii) Print the pdf:

pdfMake.createPdf(docDefinition).print()

Conclusion:

Here we have quickly walk through of pdfmake module and how can we use in our existing project. Please check out the GitHub repository for this project.

Hope you find the article useful. You can reach out to me for any doubt and suggestions.

References:

1. https://pdfmake.github.io/docs/getting-started
2. https://github.com/bpampuch/pdfmake/tree/0.1/examples