Pdfmake: Image not displaying at header or footer

Created on 10 Apr 2017  路  2Comments  路  Source: bpampuch/pdfmake

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!

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:

var docDefinition = {
  ...
  pageMargins: [ 40, 60, 40, 60 ],
  ...
}

All 2 comments

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!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ValeSauer picture ValeSauer  路  3Comments

michaelqiji picture michaelqiji  路  3Comments

davidyeiser picture davidyeiser  路  3Comments

jokris1 picture jokris1  路  3Comments

sayjeyhi picture sayjeyhi  路  3Comments