/    Sign up×
Community /Pin to ProfileBookmark

JsPdf Library can’t read Arabic in pdf Some help please?

`var sm = {
nature:[
{name:”nature1″,ar:”الطبيعة 1″},
{name:”nature2″,ar:”الطبيعة 2″},
{name:”nature3″,ar:”الطبيعة 3″},
{name:”nature4″,ar:”الطبيعة 4″}
],
exportateur:[
{name:”exportateur1″,ar:”المصدر 1″},
{name:”exportateur2″,ar:”المصدر 2″},
{name:”exportateur3″,ar:”المصدر 3″},
{name:”exportateur4″,ar:”المصدر 4″}
],
pays:[
{name:”germany”,ar:”ألمانيا”},
{name:”france”,ar:”فرنسا”},
{name:”belgium”,ar:”بلجيكا”},
{name:”spain”,ar:”إسبانيا”}
]
}
function createPdf(event){
“use strict”;
var doc = new jsPDF();
doc.text(“Nature de la marchandise: “+sm.nature[0].ar,10, 10);
}
`

>

Results {Show me some weird langage unstead of showing me الطبيعة 1}


to post a comment
JavaScript

42 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumFeb 15.2022 — According to this:

https://stackoverflow.com/questions/21923488/how-to-enable-utf-8-in-jspdf-library

jsPdf doesn't support UTF-8. Pick one of the alternatives given there.
Copy linkTweet thisAlerts:
@AlloauthorFeb 15.2022 — @Sempervivum#1642504 Thanks for the quick reply But I still don't understand how to solve the problem I'm just a beginner Can you pleaze give me solution here step by step It would be really appreciative . I'm stuck pleaze
Copy linkTweet thisAlerts:
@SempervivumFeb 15.2022 — The link I posted says that it's not possible to process those characters in your object `sm` by jsPdf. You need a library that's supporting UTF-8 character set. These do so:

http://pdfkit.org

http://pdfmake.org/#/

Take a look at those sites and choose one.
Copy linkTweet thisAlerts:
@AlloauthorFeb 15.2022 — @Sempervivum#1642514 Even After i used pdfmake library and changed the font to other than robot it still gives me some weird characters" I don't really know what's the issue?
Copy linkTweet thisAlerts:
@SempervivumFeb 15.2022 — Obviouasly pdfmake needs an extension pdfmake-unicode:

https://github.com/Landish/pdfmake-unicode

Did you try this?
Copy linkTweet thisAlerts:
@SempervivumFeb 15.2022 — I tried this pdfmake-unicode and the result was that it's outdated (last update 5 years ago) and works only with outdated version 2 of pdfmake. And additionally it supports only Georgian, Russian and Basic Latin.

In the docs of pdfmake they describe how to create a custom font. Maybe you should try this.

**Edit**: Just noticed that a regular font file can be loaded via URL. This might be the easiest way.

**Edit2**: Loading font via URL works like a charm. I tested with the font file being provided by pdfmake-unicode and russian characters are displayed properly in the PDF file. Remaining task: Get a font file that supports your language.

**Edit3**: Done, I found an arabic font and creating the PDF file is working.
``<i>
</i>&lt;!DOCTYPE html&gt;
&lt;html lang="de"&gt;

&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;title&gt;Test Pdfmake&lt;/title&gt;
&lt;style&gt;
&lt;/style&gt;
&lt;_script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.3.0-beta.1/pdfmake.min.js"
integrity="sha512-G332POpNexhCYGoyPfct/0/K1BZc4vHO5XSzRENRML0evYCaRpAUNxFinoIJCZFJlGGnOWJbtMLgEGRtiCJ0Yw=="
crossorigin="anonymous" referrerpolicy="no-referrer"&gt;&lt;/_script&gt;
&lt;_script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.3.0-beta.1/vfs_fonts.min.js"
integrity="sha512-6RDwGHTexMgLUqN/M2wHQ5KIR9T3WVbXd7hg0bnT+vs5ssavSnCica4Uw0EJnrErHzQa6LRfItjECPqRt4iZmA=="
crossorigin="anonymous" referrerpolicy="no-referrer"&gt;&lt;/_script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;_script&gt;
pdfMake.fonts = {
Roboto: {
// I kept the name Roboto (the standard font in pdfmake)
//in order to make testing easier,
// this way I didn't have to research how to specify a font.
normal: 'http://localhost/arabtype.ttf',
// bold: 'https://example.com/fonts/fontFile2.ttf',
// italics: 'https://example.com/fonts/fontFile3.ttf',
// bolditalics: 'https://example.com/fonts/fontFile4.ttf'
}
};
const dd = {
content: [
'إسبانيا',
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
]
};
pdfMake.createPdf(dd).download();
&lt;/__script&gt;
&lt;/body&gt;

&lt;/html&gt;<i>
</i>
``

(I had to add underlines to the script tags, remove them before running this code)
Copy linkTweet thisAlerts:
@AlloauthorFeb 15.2022 — @Sempervivum#1642555 Thanks for the valuable information . But I don't understand this part

normal: 'http://localhost/arabtype.ttf',

where did you get this from because its shows me

ET http://localhost/arabtype.ttf net::ERR_CONNECTION_REFUSED

And

Uncaught (in promise) TypeError: Failed to fetch (url: "http://localhost/arabtype.ttf")

at URLBrowserResolver.js:15:13
Copy linkTweet thisAlerts:
@SempervivumFeb 16.2022 — Sorry, I should have explained this:

I downloaded a font file, didn't save the url as I assumed that a font file is available to you.

This url: 'http://localhost/arabtype.ttf' points to localhost, my local webserver. Therefore it is not available for you. The font file has to be located on a webserver, e. g. on your own webspace.
Copy linkTweet thisAlerts:
@AlloauthorFeb 16.2022 — @Sempervivum#1642566 The weirdest thing is when i write this url 'http://localhost/arabtype.ttf' in browser .It opens normally but when i do it the way you do it in my code .It shows me again
``<i>
</i>Access to XMLHttpRequest at 'http://localhost/arabtype.ttf' from origin 'http://127.0.0.1:5501' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
GET http://localhost/arabtype.ttf net::ERR_FAILED 200
Uncaught (in promise) TypeError: Failed to fetch (url: "http://localhost/arabtype.ttf")<i>
</i>
``

I tried it also with xamp apach I put the file (arabtype.ttf) in htdocs and start the apach and mysql But It seems to be the same
Copy linkTweet thisAlerts:
@SempervivumFeb 16.2022 — Thus you are using a local webserver, you downloaded the font or had it available and placed it in htdocs, right? Then I'm helpless. I'm using XAMPP either and it works fine for me. Which browser are you using?
Copy linkTweet thisAlerts:
@AlloauthorFeb 16.2022 — @Sempervivum#1642569 Thank you for your effort man . I don't know what is the problem . Everything i try doesn't work .It's frustratting .Anyway, I really appreciate your help bro 😅 :
Copy linkTweet thisAlerts:
@SempervivumFeb 16.2022 — I overlooked this:
>has been blocked by CORS policy

Are you familiar with SOP and CORS? Your HTML file and your font file need to be located on the same domain. I suspect that you opened the HTML file via the file protocol. Open it from localhost either.
Copy linkTweet thisAlerts:
@AlloauthorFeb 16.2022 — @Sempervivum#1642571 I did Everything you just said. Now It gives me this error

Uncaught (in promise) Error: File 'Roboto' not found in virtual file system
Copy linkTweet thisAlerts:
@SempervivumFeb 16.2022 — @Allo#1642572 Please post your latest code.
Copy linkTweet thisAlerts:
@AlloauthorFeb 16.2022 — @Sempervivum#1642580 FIEFIEJFEIFJEFE
Copy linkTweet thisAlerts:
@AlloauthorFeb 16.2022 — @Allo#1642581 oK
Copy linkTweet thisAlerts:
@AlloauthorFeb 16.2022 — document.querySelector('#test').addEventListener("click",function(event){<br/>
event.preventDefault()<br/>
pdfMake.fonts = {<br/>
Roboto: {<br/>
// I kept the name Roboto (the standard font in pdfmake)<br/>
//in order to make testing easier,<br/>
// this way I didn't have to research how to specify a font.<br/>
normal: 'http://localhost/arabtype.ttf',<br/>
// bold: 'https://example.com/fonts/fontFile2.ttf',<br/>
// italics: 'https://example.com/fonts/fontFile3.ttf',<br/>
// bolditalics: 'https://example.com/fonts/fontFile4.ttf'<br/>
}<br/>
};<br/>
const dd = {<br/>
content: [<br/>
'إسبانيا',<br/>
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'<br/>
]<br/>
};<br/>
pdfMake.createPdf(dd).download();<br/>
})
Copy linkTweet thisAlerts:
@AlloauthorFeb 16.2022 — I can't send a lot of code at once it tells me you don't have a permistion
Copy linkTweet thisAlerts:
@SempervivumFeb 16.2022 — I'm helpless again: I copied&pasted your code, added the button and it works fine. Maybe there is something wrong with the font file? Where did you get it from?

This is the one I am using:

https://webentwicklung.ulrichbangert.de/arabtype.ttf
Copy linkTweet thisAlerts:
@AlloauthorFeb 16.2022 — @Sempervivum#1642590 It worked man you are a legend . I actually want to ask another question it's possible
Copy linkTweet thisAlerts:
@SempervivumFeb 16.2022 — Yes, feel free to ask.
Copy linkTweet thisAlerts:
@AlloauthorFeb 16.2022 — How can i share a file here in this website
Copy linkTweet thisAlerts:
@SempervivumFeb 16.2022 — Unfortunately the forum software doesn't support attachments. You have to upload the file to your own webspace and share the link.
Copy linkTweet thisAlerts:
@AlloauthorFeb 16.2022 — @Sempervivum#1642601 What do you mean by webspace?
Copy linkTweet thisAlerts:
@sibertFeb 16.2022 — Upload to your own site and share the link?

WeTransfer is only between two individuals.
Copy linkTweet thisAlerts:
@AlloauthorFeb 16.2022 — @sibert#1642603 https://we.tl/t-Z8YYSS7y03
Copy linkTweet thisAlerts:
@AlloauthorFeb 16.2022 — https://we.tl/t-Z8YYSS7y03 In file script.js line 45 i want show in content the value الطبيعة 1 . The problem is I don't know how to access to it with fetch request because fetch give me a promise unstead of value to display in pdf. I hope you understand
Copy linkTweet thisAlerts:
@SempervivumFeb 16.2022 — >The problem is I don't know how to access to it with fetch request because fetch give me a promise unstead of value

There is no need to refer to the response from the server when the PDF is created. Simply store the value of the member `ar</C> in a data attribute of each option:
<CODE>
`<i>
</i>json.then((a) =&gt; {
// for(var key in a.nature){nature
for (var key in a.nature) {
document.getElementById('nature').innerHTML += '&lt;option value="' + key
+ '" data-ar="' + a.nature[key].ar + '"&gt;' + a.nature[key].name + '&lt;/option&gt;'

// console.log(a.nature[key].name)
}
// do the same for the remaining selects<i>
</i>
`</CODE>
Later on you can read the value from the option being selected:
<CODE>
`<i>
</i> content: [
{
text: document.querySelector('#nature options:selected').dataset.ar
},
// {text: '1 Headline',style: 'header' },
// 'Some long text of variable length ...',
// {text: '2 Headline', headlineLevel: 1},
// 'Some long text of variable length ...',
// {text: '3 Headline', headlineLevel: 1},
// 'Some long text of variable length ...',
],<i>
</i>
``
(not tested, give it a try and ask if it doesn't work)
Copy linkTweet thisAlerts:
@SempervivumFeb 16.2022 — PS: There is an error in my code: There is no pseudo class `:selected</C>, must read <C>option:checked</C>:
<CODE>
`<i>
</i> const dd = {
// pageSize: {
// width: 170,
// height: 113
// },
content: [
{
text: document.querySelector('#nature option:checked').dataset.ar
},<i>
</i>
``
Copy linkTweet thisAlerts:
@AlloauthorFeb 16.2022 — @Sempervivum#1642606 text: document.querySelector('#nature').dataset.ar Gives me undefinded?
Copy linkTweet thisAlerts:
@SempervivumFeb 16.2022 — You omitted something in the selector:

text: document.querySelector('#nature **option:checked**').dataset.ar

`document.querySelector('#nature')</C> exists but doesn't have an attribute <C>dataset`
Copy linkTweet thisAlerts:
@AlloauthorFeb 17.2022 — @Sempervivum#1642612 @Sempervivum#1642612 It worded I used this document.getElementById('nature').options[document.getElementById('nature').selectedIndex].dataset.ar+" : البضاعة تعريف"

Another Question :

Now the problem is when i want to write a number with my arabic word it reverse it for example unstead of " الطبيعة 2 "It gives me "الطبيعة" then it gives me 2 , What is the issue?
Copy linkTweet thisAlerts:
@SempervivumFeb 17.2022 — @Allo#1642620

Probably the reason is that this language is right to left.
>i want to write a number with my arabic word

What do you mean, write a string that is defined in the JS or JSON to the PDF document or enter it manually into an input field?
Copy linkTweet thisAlerts:
@AlloauthorFeb 17.2022 — @Sempervivum#1642621 yes this langage is right to left but numbers are left to right. The issue is when i include numbers in an arabic text it doesn't read it from right to left ?

I want somehow to change it's direction when i write arabic text?
Copy linkTweet thisAlerts:
@SempervivumFeb 17.2022 — Others are facing this issue either:

https://github.com/bpampuch/pdfmake/issues/184

TeamWebc's solution works for me:
``<i>
</i> const dd = {
content: [
" الطبيعة 2 ".split(" ").reverse().join(" "),
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
]
};<i>
</i>
``
Copy linkTweet thisAlerts:
@AlloauthorFeb 17.2022 — @Sempervivum#1642624 everything works . the single issue that i have is I want to make my arabic text start from right at the same point vertically.

Example

لوريم ايبسوم هو نموذج

لوريم ايبسوم هو

لوريم ايبسوم هو نموذج
Copy linkTweet thisAlerts:
@AlloauthorFeb 17.2022 — @Sempervivum#1642624 everything works . the single issue that i have is I want to make my arabic text start from right at the same point vertically.

This is not what i want :

لوريم ايبسوم هو نموذج

لوريم ايبسوم هو

لوريم ايبسوم هو نموذج

This is what I want :

لوريم ايبسوم هو نموذج

لوريم ايبسوم هو

لوريم ايبسوم هو نموذج
Copy linkTweet thisAlerts:
@SempervivumFeb 17.2022 — I understand what you mean, I'm gonna take a look at the docs, wait ...
Copy linkTweet thisAlerts:
@AlloauthorFeb 17.2022 — @Sempervivum#1642640 Ok thanks
Copy linkTweet thisAlerts:
@SempervivumFeb 17.2022 — ... not the docs but try if the solution given here works for you:

https://stackoverflow.com/questions/46885361/how-to-align-a-column-to-right-in-a-table-in-pdf-make/47979258

`{text: 'لوريم ايبسوم هو نموذج', alignment: 'right'}`
Copy linkTweet thisAlerts:
@AlloauthorFeb 17.2022 — @Sempervivum#1642642 It worked . I think there must be a library that doesn't make you go throught all of this? Because there is a lot of tweaking just to get a simple pdf form
Copy linkTweet thisAlerts:
@SempervivumFeb 17.2022 — Yes, but I think after having got the basics things will be easier. The alternative is PDFKit and they say that you have to calculate all the positions, x and y, by yourself. This enables for realizing any kind of layout you like but would be more complex than pdfmake. You can also use FPDF on the server side, however the same applies to this one. I created a simple layout some time ago and it was fairly complex. And no sufficient error handling.
×

Success!

Help @Allo spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...