I need to add an image in the header of the report generated by pdfmake. But when following the documentation I can't make this insertion, not even when converting the image to base64. Please suggest another solution
What was done:
import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
function epiPDF(epis){
pdfMake.vfs = pdfFonts.pdfMake.vfs;
const header = [
{
text: 'Description equipament',
bold: true,
fontFamily: 'Roboto',
decoration: 'underline',
margin: [0, 20, 0, 0],
alignment: 'center',
image: 'data:image/jpeg;base64,/9j/END_DATAURL_BASE64'
}
];
function Rodape(currentPage, pageCounf){
return [
{
text: currentPage + ' / ' + pageCounf,
alignment: 'right',
fontSize: 9,
margin: [0, 10, 20, 0]
}
]
}
const docDefinitios = {
pageSize: 'A4',
pageMargins: [10, 50, 10, 40],
header: [header],
content: [infor, rec, details],
footer: [Rodape]
}
pdfMake.createPdf(docDefinitios).download();
}
export default epiPDF;
when testing base64 code is correct
Could you please indicate what the browser errors are ?
Also I suggest you try again with the base64 encoded image specified in the pdfmake's playground
Your docDef's header and footer should be functions instead of Arrays.
Pdfmake elems have a specific structure, for example a text element cannot have an image (it must be 2 separated elems).
Your code should look something like this :
const getHeader = (currPage, totalPage) => [
{
text: 'Description equipament',
bold: true,
fontFamily: 'Roboto',
decoration: 'underline',
margin: [0, 20, 0, 0],
alignment: 'center',
image: 'data:image/jpeg;base64,/9j/END_DATAURL_BASE64'
},
{
image: 'data:image...YOUR IMAGE',
margin: [0, 20, 0, 0],
alignment: 'center',
}
]
const docDefinitios = {
pageSize: 'A4',
pageMargins: [10, 50, 10, 40],
header: getHeader,
content: [infor, rec, details],
footer: Rodape
}
Cheers