html method bug not good positioning of symbols and some elements

[DamyanBG]

I am facing an issue when I want to create PDF from a HTML, which contains dashes, symbols (the issue is not related to the garbled characters, the characters are visible) and some elements. The items are not aligned properly.

This is example with the dashes:

The expected result:

Similar is the situation with strong element:

The actual result:

The expected result:

With the heading elements the situation is the same.

[cesarIsysDev]

Hello, share with us the code where you set the html on the pdf so we can figure out why is not working. It would be helpfull if you also share the html and the styles since it could be the cause of the issue (do not forget to send the version of jspdf you are using and how you are importing it)

[DamyanBG]

I will represent the issue these days.

[DamyanBG]

Hello,

Here is the repo with a branch where I represented the issue - https://github.com/DamyanBG/learn-how-to-usecontext/tree/jspdf-issue-represent

Steps to represent:

1. Clone the repo
2. Checkout branch jspdf-issue-represent
3. Install the npm packages with npm install
4. Run the app with npm run dev
5. On the main page add to cart all products at least once
6. Open the cart when click on the cart icon on the upper right corner
7. Click on Export PDF button
8. The PDF file have to be downloaded

I used Roboto font, I am adding the font to jsPDF and the issue is visual.

[jguirimm]

Bonjour, je souhaite participer à la résolution de ce problème. Pouvez-vous me l'attribuer ?

[ryahpalma]

Font issue.

[DamyanBG]

Font issue.

Hello,

Thank you for the answer .

Can you be more descriptive? Can you suggest me font with which this code will works well?

[ryahpalma]

Font issue.

Hello,

Thank you for the answer .

Can you be more descriptive? Can you suggest me font with which this code will works well?

I don't use jsPDF anymore, i tried it for about 7 months, i'm using pdfMake + htmlToPdfmake. I loved it so much! The image and table management is excellent, you should try it.

import pdfMake from "pdfmake";
import htmlToPdfmake from "html-to-pdfmake";
import pdfFonts from "@/vfs_fonts"; // Here i inserted all fonts Arial as base64 like jsPDF does, you can see how to create your own vfs on pdfMake documentation.

const contractHtml = document.getElementById("contract").innerHTML;
const convertedHtmlToPdfMake = htmlToPdfmake(contractHtml, {"tableAutoSize": true});

const pdfMakeOptions = {
    content: convertedHtmlToPdfMake,
    compress: true,
    defaultStyle: {
        font: "Arial",
    }
};

pdfMake.vfs = pdfFonts;

pdfMake.fonts = {
    Arial: {
        normal: 'Arial-Normal.ttf',
        bold: 'Arial-Bold.ttf',
        italics: 'Arial-Italic-Normal.ttf',
        bolditalics: 'Arial-Italic-Bold.ttf'
    }
};

// Print directly
pdfMake.createPdf(pdfMakeOptions).print();

// Generate blob
pdfMake.createPdf(pdfMakeOptions).getBlob(async (blob) => { 
    console.log(blob);
});

[AutismPatient]

Is there any progress on this issue? As far as I know The email format also creates extra space:

[email protected] will become test @gmail .com

[AutismPatient]

You need to add the FontFace attribute to the HTML options @DamyanBG https://raw.githack.com/MrRio/jsPDF/master/docs/module-html.html#~html

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. It will be closed soon. Please comment/reopen if this issue is still relevant.