I have a simple function that converts a div to PDF by using html2canvas and jsPDF.
const exportToPdf = () => {
const component = props.componentRef.current
html2canvas(component, {scale: props.scale}).then((canvas) => {
const dataImage = canvas.toDataURL('image/jpeg');
const pdf_width = pxTomm(canvas.width);
const pdf_height = pxTomm(canvas.height);
const pdf = new jsPDF(
props.orientation,
'mm',
[pdf_width + props.xCoord, pdf_height + props.yCoord]);
pdf.setProperties({title: props.title});
pdf.addImage(dataImage, 'JPEG', 0, 0, pdf_width, pdf_height);
window.open(pdf.output('bloburl'),'_blank')
})
}
The problem is that the conversion doesn't seem to use the div's font family: National, sans-serif.
This affects only numbers. Any idea how to solve this? I can't change the actual font as the whole project uses the same font. It's added through @font-face.