When I add an image to the header or footer, it is not displayed. However, if I add it to the content, it displays just fine.
Here is the source code:
@action generatePdf(id) {
getJson(config.url + '/imovel/' + id).then(imovel => {
this.toDataUrl('http://localhost:3000/img/tb_logo.png', (base64Img) => {
this.getDespesas(imovel._id).then(despesas => {
this.getReceitas(imovel._id).then(receitas => {
var docDefinition = {
header: [
],
footer: {
columns: [
{image: base64Img,
width:200,
heght:200
},
{text: 'aaa'}
]
},
content: [
{image: base64Img,
width:200,
height:200,
alignment:'center',
margin:[0, 0, 0, 25]
},
{text: imovel.titulo, style: 'header'},
{style:'default', text: 'Tipo:' + imovel.tipo},
{style:'default', text: 'RGI: ' + imovel.rgi},
{style:'default', text: 'Observa莽茫o: ' + imovel.observacaoGestor},
{style:'default', text: 'Metragem', style: 'subtitulo'},
{style:'default', text: 'Area total: ' + imovel.metragem.areaTotal},
{style:'default', text: 'Area construida: ' + imovel.metragem.areaConstruida},
{style:'default', text: 'Capacidade: ' + imovel.metragem.capacidade},
{style:'default', text: 'Endere莽o ', style:'subtitulo'},
{style:'default', text: 'Estado: ' + imovel.endereco.estado},
{style:'default', text: 'Cidade: ' + imovel.endereco.cidade},
{style:'default', text: 'Bairro: ' + imovel.endereco.bairro},
{style:'default', text: 'Rua: ' + imovel.endereco.rua},
{style:'default', text: 'Numero: ' + imovel.endereco.numero},
{style:'default', text: 'Complemento: ' + imovel.endereco.complemento},
{style:'default', text: 'Ponto de refer锚ncia: ' + imovel.endereco.pontoDeReferencia},
{style:'default', text: 'Propriet谩rio', style: 'subtitulo'},
{style:'default', text: 'Nome: ' + imovel.proprietario.nome },
{style:'default', text: 'Locatario', style: 'subtitulo'},
{style:'default', text: 'Seguro? ' + (imovel.locatario.seguro ? 'Sim' : 'N茫o')},
{style:'default', text: 'Garantia: ' + imovel.locatario.garantia},
{style:'default', text: 'Descri莽茫o da garantia: ' + imovel.locatario.descricaoGarantia},
{style:'default',
text: 'Data de inicio de validade da garantia: ' + moment(imovel.locatario.dataInicioValidadeGarantia).format('DD/MM/YYYY')},
{style:'default',
text: 'Data do fim da validade da garantia: ' + moment(imovel.locatario.dataFimValidadeGarantia).format('DD/MM/YYYY')},
{style:'default',
text: 'Data de vencimento do seguro: ' + moment(imovel.locatario.dataVencimentoSeguro).format('DD/MM/YYYY')},
{style: 'marginTop', text: ''},
{style:'default', text: 'Despesas', style: 'subtitulo'},
{table: {
body: despesas
}},
{style:'default', text:'Receitas', style:'subtitulo'},
{table: {
body:receitas
}}
],
styles:{
header: {
fontSize:12,
bold:true,
alignment: 'center'
},
subtitulo:
{
fontSize:12,
bold:true,
margin:5,
alignment:'center'
},
default: {
alignment: 'center'
},
marginTop: {
marginTop:200
}
}
}
pdfMake.createPdf(docDefinition).open()
})
})
})
})
}
So, am I missing something out? Or is it a bug?
Thanks in advance!
I do not know what your image, but the image is not displayed if it is too big.
Set bigger pageMargin, example:
var docDefinition = {
...
pageMargins: [ 40, 60, 40, 60 ],
...
}
Setting a pageMargin worked!
Most helpful comment
I do not know what your image, but the image is not displayed if it is too big.
Set bigger
pageMargin, example: