Grid-like labels-stickers dynamically generating Node js

Question

So I have a bunch of json, infinite amounts the case being there are reports being generated on a daily-basis, I have to generate a PDF with all the necessary information one label after the other, side by side, grid style.

The only npm library that seems to solve my need is react-avery which on first sight looks like the perfect solution to my problem, since I'm using Avery labels and my Front-end is react based so I could just get the json from my backend and generate the pdf, the but is that this library hasn't been maintained for 3 years and the documentation doesn't make anything clear for me on how to use it, giving me a bunch of errors when I try to implement it.

Any idea or package for me to achieve this ? Front-end focused or Back-end with Node.js would do.

I have tried pdfkit and I'm currently using it for pdf generation but when It comes to placing the items side by side it doesn't do the trick.

labelmake and its successor pdfme seem to offer me the functionality of creating and adding the placeholders for the templates, but I can't find anything about the grid functionality I need.

Answer 1

You can use pdfme to create your own grid by placing a text object at each label location (calculated by dividing up the A4 page by the number of label rows & cols):

const fontSize: number = 12;
const labelWidth: number = 99;
const labelHeight: number = 38;
const sheetHeight: number = 297;
const sheetWidth: number = 210;
const sheetCols: number = 2;
const sheetRows: number = 7;

const template: Template = {
  basePdf: BLANK_PDF,
  schemas: [
    {
      0: {
        type: "text",
        position: { x: (sheetHeight / sheetRows) * 0, y: (sheetWidth / sheetCols) * 0 },
        width: labelWidth,
        height: labelHeight,
        alignment: "center",
        fontSize: fontSize,
      },
      13: {
        type: "text",
        position: { x: (sheetHeight / sheetRows) * 6, y: (sheetWidth / sheetCols) * 1 },
        width: labelWidth,
        height: labelHeight,
        alignment: "center",
        fontSize: fontSize,
      },


const inputs = [{ 0: "a", 13: "z" }];

generate({ template, inputs }).then((pdf) => {
console.log(pdf);
});

Answer 2

You could design your labels using HTML and CSS, then use paged.js to render that out to a PDF. Paged.js is a javascript library that implements the W3C Paged Media standards, which allow you to design for print using HTML and CSS. Paged.js works both as a polyfill in a browser and as a command line interface that generates PDFs.

The polyfill version is great for easy design iteration of label sheets in a browser and then the command line version can then be used to generate PDFs in production.