Abhishek6198
New Coder
I am trying to set a custom font inside styles{} inside doc.autoTable({ }). This is my code:
The above code is working perfectly when I run it in localhost. But now, when I've uploaded it into my live website, strangely, it's not working!! The code below works if I apply the font to a standard text (in both localhost and live website) like:
This is the table displayed when I execute the code in my local server
And this is what I get when I execute the code in my live server
As the above code wasn't working in the live website, I tried a different approach:
What I did was I converted the text to an image and appended that image into the cell of my HTML table.
And then appending this image into my table cell in jspdf-autotable:
Suprisingly enough, this too shows the data inside the table perfectly, but only in my local server.
Why? What is the matter? Is this a bug that the font doesn't work in jspdf-autotable in live server? Why can't I show vernacular text in my jspdf autotable in my live website? Please help me fix this
JavaScript:
let doc = new jsPDF();
doc.autoTable({
html: '#news_pos',
startX: 10,
startY: 15,
theme: 'grid',
bodyStyles: {lineColor: [0, 0, 0]},
styles: {
font: "SakalBharati", //<------ This is the font. I have already added this font using doc.addfont()
fontSize: 10,
cellWidth: 'auto',
halign: 'center',
fillColor: [225, 197, 238]
},
})
doc.save("file.pdf");The above code is working perfectly when I run it in localhost. But now, when I've uploaded it into my live website, strangely, it's not working!! The code below works if I apply the font to a standard text (in both localhost and live website) like:
JavaScript:
doc.setFont("SakalBharati","normal");
doc.text(10,15,"पूसीरे के");
/*This code works perfectly in both local and live server. Only
when I apply the font in jspdf-autotable (in live server),
it doesn't work*/This is the table displayed when I execute the code in my local server
And this is what I get when I execute the code in my live server
As the above code wasn't working in the live website, I tried a different approach:
What I did was I converted the text to an image and appended that image into the cell of my HTML table.
JavaScript:
var tCtx = document.getElementById('textCanvas').getContext('2d'),
imageElem = document.getElementById('image');
tCtx.canvas.width = tCtx.measureText("पूसीरे के रेसुब ने नाबालिगों").width;
tCtx.fillText("पूसीरे के रेसुब ने नाबालिगों", 0, 10);
imageElem.src = tCtx.canvas.toDataURL();
cell1.appendChild(imageElem);And then appending this image into my table cell in jspdf-autotable:
JavaScript:
doc.autoTable({
html: '#news_pos',
startX: 10,
startY: 15,
theme: 'grid',
didDrawCell: function(hookData) {
for(var j=1; j<document.getElementById("news_pos").rows.length; j++){
for(var k=0; k<document.getElementById("news_pos").rows[j].cells.length; k++){
if(document.getElementById("news_pos").rows[j].cells.item(k).innerHTML.includes("img")){
if(hookData.column.index == k && hookData.row.index == j){
var td = hookData.cell.raw;
var img = td.getElementsByTagName('img')[0];
var dim = hookData.cell.height - hookData.cell.padding('vertical');
doc.addImage(img.src, hookData.cell.x+4, hookData.cell.y+1, 80,dim+2);
}
}
}
}
},
bodyStyles: {lineColor: [0, 0, 0]}
})Suprisingly enough, this too shows the data inside the table perfectly, but only in my local server.
Why? What is the matter? Is this a bug that the font doesn't work in jspdf-autotable in live server? Why can't I show vernacular text in my jspdf autotable in my live website? Please help me fix this
