I want to download a pdf file with Arabic fonts in react and haven't found any solution. I am currently using jsPdf but it's not rendering Arabic font's properly
let doc = new PDFDocument
let doc = new pdf();
doc.setFontSize(10);
doc.rect(20, 20, doc.internal.pageSize.getWidth() - 40,
doc.internal.pageSize.getHeight() - 40, 'S');
doc.setTextColor(128,0,128);
doc.text("Date", 30, 25);
doc.text(this.state.date, 50, 25);
doc.text("السلام عليكم", 30, 35);
doc.text("Quantity", 120, 35);
let distance = 30;
doc.save("data.pdf");
Thanks in advance
First download a desired font. Then go to https://rawgit.com/MrRio/jsPDF/master/fontconverter/fontconverter.html
and convert & download the file. Move it to your project directory and import it in the desired module.
You can also take the large string and put it in a variable const myFont = "VVV....VVV"
Then use it like this.
doc.addFileToVFS("MyFont.ttf", myFont);
doc.addFont("MyFont.ttf", "MyFont", "normal");
doc.setFont("MyFont");
Now you will need to right-align the text.
doc.text("Arabic Text", 200, 20, "right");
//OR
doc.text("Arabic Text", 200, 20, { align : "right" } );
/*
200 is the x coordinate and marks the starting position of the text from right.
y coordinate is the distance from the top of the page.
*/
Did you try adding {lang: 'value'} Option ?
doc.text(['لا إله إلا الله محمد رسول الله', 'لا إله إلا الله', 'a'], 100, 100, { lang: 'ar' });
The Arabic font can be printed into pdf by following these steps
Convert HTML to canvas using html2canvas
Convert the image to pdf using jspdf
const input = document.getElementById('divIdToPrint');
html2canvas(input)
.then((canvas) => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF();
pdf.addImage(imgData, 'PNG', 0, 0);
pdf.save("download.pdf");
});
Details in this blog
Demo link on Stackblitz
Add this styling to the wrapper object to properly render arabic font:
letter-spacing: normal !important;
source : Arabic font rendering
Related
I have figma design 2380х3368.
So, I create pdf with such parameters:
const doc = new jsPDF({orientation: 'portrait',unit: 'px', userUnit: 300, format: [2780, 3368]});
and:
doc.html(pageTemplate.querySelector('html'), {
callback: function(doc) {
doc.save('pdf-template.pdf');
},
margin: [0,0,0,0],
});
But this size is too big for printing pdf. I want dpi 300, so it would be ok, but I can't find where to put this in jsPDF
I am trying to use jsPdf to generate a pdf from an html string.
I am able to generate pdf using the code below.
const generatePDF = () => {
const pdf = new jsPDF({
orientation: "p",
unit: "pt",
format: "a4",
});
const width = pdf.internal.pageSize.getWidth();
pdf
.html(htmlContent, {
width: width,
windowWidth: 794,
margin: [58, 80, 52, 80],
html2canvas: { scale: 0.57 },
})
.then(() => {
pdf.save('test.pdf');
});
};
However, i think the page break is now working as expected. in some pages, text is split between pages like this
[![enter code here][1]][1]
Anyone has a clue how to fix this?
You should probably use html2pdf instead of jspdf. It uses jspdf but is easier to use. Add a page break and it should be ok.
I really can't find any good documentation or any good samples on how to do this.
Here is my code. This is running in an Asp.net Core View.
var imageMarker = "https://unpkg.com/leaflet#1.7.1/dist/images/marker-icon.png";
for (var i = 0; i < locationData; i++) {
let imageName = 'image' + i;
map.imageSprite.add(imageName, imageMarker).then(function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Create a point feature and add it to the data source.
datasource.add(new atlas.data.Feature(new atlas.data.Point(i.longitude, i.latitude), {
name: i.name
}));
//Add a layer for rendering point data as symbols.
map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
//Pass in the id of the custom icon that was loaded into the map resources.
image: imageName,
//Optionally scale the size of the icon.
size: 0.5
},
textOptions: {
//Add some text
textField: name,
//Offset the text so that it appears on top of the icon.
offset: [0, -2]
}
}));
});
}
I'm not getting any errors. The Symbols just don't appear on the map.
The sample linked below works in my map.events.add ready function.
Image Sprite sample
Any help is much appreciated! Thanks!
Here is what ended up working for me. I worked with Microsoft Support on this. locationData contains the image, longitude and latitude. The min and max of both longitude and latitude is passed in as well to set the camera boundry. The biggest issue with my original code was setting iconOptions size to 0.5. The plugin did not like that. It's now set to 1.
function addMarkerSymbols(locationData, min_long, min_lat, max_long, max_lat)
{
map.setCamera({
bounds: [min_long, min_lat, max_long, max_lat],
padding: 50
});
$.each(locationData, function (i, item)
{
map.imageSprite.add('default-icon' + i, item.locationImage);
//Create a data source and add it to the map.
var datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Add a data set to the data source.
datasource.add(new atlas.data.Feature(new atlas.data.Point([item.longitude, item.latitude]), null));
//Create a symbol layer to render the points.
layer = new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
//The map control has built in icons for bar, coffee and restaurant that we can use.
image: 'default-icon' + i,
anchor: 'center',
allowOverlap: true,
size: 1
}
});
map.layers.add(layer);
});
}
How to add custom font in Jspdf with react? I tried every possible solution but nothing is working.I am stuck here.
convert your font.ttf file to js file using a this site : https://peckconsulting.s3.amazonaws.com/fontconverter/fontconverter.html
then take the font name and type,
export the the callAddFont function and call it where you want .
//this in the js file we generated from
//peckconsulting.s3.amazonaws
var font ".....
.....
.....";
var callAddFont = function () {
this.addFileToVFS("Calibri Bold-normal.ttf",
font);
this.addFont("Calibri Bold-normal.ttf","Calibri
Bold", "normal");
};
export { callAddFont };
// your component
import { callAddFont } from "./fonts/Calibri
Bold-normal";
.....
.....
jsPDF.API.events.push(["addFonts",
callAddFont]);
var doc = new jsPDF("l", "mm", [220, 250]);
doc.setFont("Calibri Bold", "normal");
doc.text("example")
Frankly working with fonts in jsPDF is a real pain in the back. In most cases I personally prefer to use rasterizehtml or html2pdf in complex with jsPDF. However, if you have no choice, I recommend watching this example
function createPDF() {
const doc = new jsPDF({
unit: "pt",
orientation: "p",
lineHeight: 1.2
});
doc.addFont("Arimo-Regular.ttf", "Arimo", "normal");
doc.addFont("Arimo-Bold.ttf", "Arimo", "bold");
doc.setFont("Arimo");
doc.setFontType("normal");
doc.setFontSize(28);
doc.text("Hello, World!", 100, 100);
doc.setFontType("bold");
doc.text("Hello, BOLD World!", 100, 150);
doc.save("customFonts.pdf");
}
The code is clear but it's doesn't matter... Pay attention on Pen's Settings:
So the answer is using jspdf-customfonts and its tool makeFont
node makeFonts.js - to create a new dist/default_vfs.js
I'm using the package blueimp-load-image package to load an image in my react application. The image should be resized and put into a canvas afterwards.
This is my code that handles the upload. It can only be an image.
const handleImageUpload = e => {
const [file] = e.target.files;
if (file) {
loadImage(
file,
img => {
setImage(img);
changeOffset(img);
},
{
orientation: true,
maxWidth: innerWidth,
maxHeight: innerHeight,
downsamplingRatio: 0.25,
pixelRatio: window.devicePixelRatio,
imageSmoothingEnabled: true,
imageSmoothingQuality: 'high',
canvas: false,
contain: true,
}
);
}
};
The img gets put into a state variable that gets shown in my canvas (I'm using a KonvaImage from react-konva for that). My problem is that if I don't use pixelRatio: window.devicePixelRatio, the image gets shown correctly, but the quality is poor. If I, however, use pixelRatio: window.devicePixelRatio, the picture is zoomed in.
If I log out the img inside the loadImage this is the output. The first one without pixelRatio, the second one with pixelRatio.
This is what the image on the screen looks like (again first one without pixelRation, the second one with pixelRatio):
I hope somebody can help me with my problem. I would of course also be open for a different way of resizing the images if it works better.
Thanks in advance!