I want to load HTML content on top and image information below of that

[patel-devang]

I want to load HTML content on top and image information below of that in document. Both are different data. My image information is currently in base64 format. So how can I achieve that?

Currently, it is throwing an error when I am calling getBase64(). My goal is combine HTML content and base64 image data and return. Please let me know if I am doing anything wrong here.

import { Injectable } from '@angular/core';
import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
import htmlToPdfmake from 'html-to-pdfmake';
(pdfMake as any).vfs = pdfFonts.pdfMake.vfs;

@Injectable({
  providedIn: 'root',
})

export class PdfGeneratorService {

  async generateBase64Pdf(agreementInfo: string | undefined, imageData: string): Promise<string> {
    return new Promise((resolve, reject) => {
      try {
        // Convert HTML to pdfmake format
        const htmlContent = htmlToPdfmake(agreementInfo);

        // Define the document structure
        const documentDefinition = {
          content: [
            {
              stack: htmlContent,    
              style: 'htmlContent',
            },
            {
              image: imageData,    // Ex: data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAA...
              width: 500,
              margin: [0, 20, 0, 0],
            },
          ],
          styles: {
            htmlContent: {
              fontSize: 12,
            },
          },
        };

        // I want createPdf() return combined base64 value of top section HTML content and bottom section image.
        pdfMake.createPdf(documentDefinition).getBase64((base64: string) => {
          resolve(base64);
        });
      } catch (error) {
        reject(error);
      }
    });
  }
}

[Aymkdn]

Sorry I'm already off for the weekend. I'll look at your question on Monday!

[patel-devang]

No problem!. Thanks for responding @Aymkdn

This seems more over issue with content. Meaning, when I am passing <p> Simple Testing </p> it is working fine. But when I am having something like below HTML content, it is failing:

<p>This is Signature Agreement Info<br><span style="color: rgb(255, 0, 0); text-decoration: inherit;"><span style="background-color: rgb(255, 255, 0);">Please read it carefully.</span></span></p>

Update After debugging more I found that having some inline styles into HTML tag is creating an issue (Like text-decoration: inherit;). If I remove these inline styles then it is working fine. <p>This is Signature Agreement Info<br><span><span>Please read it carefully.</span></span></p>

These inline styles are coming dynamically so I don't have control on those and I want to show information with those styles.

@Aymkdn let me know if you have idea on this how can I handle it. Thank You!

[Aymkdn]

After debugging more I found that having some inline styles into HTML tag is creating an issue (Like text-decoration: inherit;). If I remove these inline styles then it is working fine.

This is Signature Agreement Info
Please read it carefully.

inherit is not a valid property for text-decoration based on the PDFMake documentation.

I've just published a new version (2.5.10) that will verify the text-decoration property to only accept one of the three properties that work with PDFMake (otherwise it will just ignore the style).

[patel-devang]

After debugging more I found that having some inline styles into HTML tag is creating an issue (Like text-decoration: inherit;). If I remove these inline styles then it is working fine. This is Signature Agreement InfoPlease read it carefully.

inherit is not a valid property for text-decoration based on the PDFMake documentation.

I've just published a new version (2.5.10) that will verify the text-decoration property to only accept one of the three properties that work with PDFMake (otherwise it will just ignore the style).

Thank you! It is working fine now.