simonbengtsson / jsPDF-AutoTable

jsPDF plugin for generating PDF tables with javascript
https://simonbengtsson.github.io/jsPDF-AutoTable/
MIT License
2.32k stars 625 forks source link

JsPDF Autotable, arabic text does not fill the whole cell #1072

Open yassin97 opened 1 week ago

yassin97 commented 1 week ago

I'm trying to use arabic text in a table using JsPdf and Autotable but im having issues of formatting. Text doesn't align properly and doesn't fill the whole cell.

Here's the style i used for the cell:

{ "content": arabicText, styles: {halign: "right", direction: 'rtl', lang: 'ar', cellWidth: 100, fontStyle: 'Amiri', fontSize: 9} },

Here's how it looks:

Capture d'écran 2024-10-09 144223

simonbengtsson commented 1 week ago

Interesting! Do you have a minimal example of how you are loading the font etc? Likely an issue with jsPDF and not this plugin but would be interesting to look at regardless.

yassin97 commented 1 week ago

@simonbengtsson thanks for getting back to me!

1- I downloaded the ttf file Amiri-Regular.ttf 2- I converted it to base64 using this site: https://rawgit.com/MrRio/jsPDF/master/fontconverter/fontconverter.html 3- I created a file called AmiriRegular.js which contains the following code:

import { jsPDF } from "jspdf" export default '... base64 script' // for example export default 'AAEAAAAPAIAAAwBwR0RFRmZbhTsAAAIIAAADBEdQT1MynKZoA.....' 4- Then I used it in the other file like this:

` import {jsPDF} from 'jspdf' import autoTable from 'jspdf-autotable' import AmiriRegular from "./AmiriRegular.js"

let callAddFont = function () { this.addFileToVFS('Amiri-Regular.ttf', AmiriRegular ); this.addFont('Amiri-Regular.ttf', 'Amiri', 'normal'); }; jsPDF.API.events.push(['addFonts', callAddFont]);

const doc = new jsPDF('portrait', 'pt', 'a4');

// etc etc ` That's all the steps i used to load the Amiri font.