How to generate a PDF from JSON-based HTML/SCSS template?

I have a server(Nodejs typescript) that create labels data in a JSON format. Each label has a unique ID, and it contains various details like shipment information, weight, barcode, etc. Here's a sample of the JSON structure:

{
    "{{unique-id}}": [
        {
            "shipment_details": {
                "from": {
                    "company": "company Inc",
                    "address": "address",
                    "country": "country"
                },
                "to": {
                    "company": "company",
                    "address": "address",
                    "country": "country"
                }
            },
            "weight": "31",
            "cz": "CZ002205",
            "created": "Created: 2023/09/05 01:21 PDT (-07)",
            "barcode": "barcode",
            "sku": "sku-IMP",
            "quantity": 20
        }
    ]
}

I've created a component template(Reactjs typescript) styled with SCSS to represent the label. Now, I'd like to generate a PDF file on the client side that presents this template as readable text (not as an embedded image).

And with the template I want play and make one label per page or 6 labels per page so the component should also resize and fit.

‏I've heard of libraries like jsPDF & react-pdf, but I'm not sure how to proceed, especially with retaining the styling from SCSS and ensuring the content remains as text in the PDF.

‏Does anyone have a solution or approach for converting this styled HTML template into a text-readable PDF?

‏Thank you in advance!

Here example of the label.

Finally I was able to create the label that I wanted using the react-pdf and bwipjs libraries. The big problem was how I write the barcodes inside the pdf, and I found that with the help of bwipjs it is possible to generate and turn it into a canvas and then it will be as an image inside the pdf and then with the help of import { StyleSheet } from "@react-pdf/renderer"; You can design the elements and put them in the desired place.

here is a small code example.

import { Document, Page, Text, View, Image, StyleSheet } from '@react-pdf/renderer';

const styles = StyleSheet.create({
  labelContainer: {
    // Define container styles
  },
  text: {
    // Define text styles
  },
  // Define styles for other elements
});

function RenderLabel({ labelData }) {
  return (
    <Document>
      <Page>
        <View style={styles.labelContainer}>
          {/* Render text elements */}
          <Text style={styles.text}>{labelData.shipment_details.from.company}</Text>
          {/* Insert barcode images */}
          <Image src={barcodeImageData} />
          {/* Add other elements as needed */}
        </View>
      </Page>
    </Document>
  );
}

here is how to generate barcode, and then to canvas and return the dataUrl

import bwipjs from 'bwip-js';

async function generateBarcodeDataURL(options) {
  return new Promise((resolve) => {
    bwipjs.toCanvas('myCanvas', options, (info, canvas) => {
      resolve(canvas.toDataURL('image/png'));
    });
  });
}