I need to generate a pdf with an image per page

Asked

Viewed 69 times

0

createpdf(){

   var date = new Date()

   var pdf = new jsPDF('p', 'mm', 'a4'),
   margin = 0.5, // inches on a 8.5 x 11 inch sheet.
   verticalOffset = margin

   var logoImage = '/images/logo/logo1.jpg'
   *convertImgToBase64(logoImage, function(base64Img){
       pdf.addImage(base64Img, 'PNG', 10, 10, '', '', '', 'FAST')
   })
   pdf.setLineWidth(0.1)
   pdf.setFontSize(20)
   pdf.text(50, 15, 'Orçamento: '+this.orcamento.id+' - Data: '+('0' + date.getDate()).slice(-2) + '/' + ('0' + (date.getMonth() + 1)).slice(-2) + '/' +  date.getFullYear())
   pdf.line(48, 18, 200, 18)
   pdf.setFontSize(12)
   pdf.text(50, 23, 'Oficina: '+this.orcamento.oficinas[0].nome)
   pdf.line(48, 25, 200, 25)
   pdf.text(50, 30, 'Endereço: '+this.orcamento.oficinas[0].endereco+', '+this.orcamento.oficinas[0].numero)
   pdf.line(48, 32, 200, 32)
   pdf.text(50, 37, 'CNPJ: '+this.orcamento.oficinas[0].cpf)
   pdf.line(48, 39, 200, 39)
   pdf.text(50, 43, 'E-mail: '+this.orcamento.oficinas[0].email)
   pdf.line(48, 45, 200, 45)
   pdf.line(48, 18, 48, 45)
   pdf.line(200, 18, 200, 45)

   for (let i = 0; i < this.orcamento.itens.length; i++) {
      let descricao = $('#desc'+i)[0]
      let line = 50
      var itemImage = '/storage/orcamentos/'+this.orcamento.itens[i].imagem
      convertImgToBase64(itemImage, function(base64Img){
         pdf.addImage(base64Img, 'PNG', 10, 180, '', '', 'a'+i, 'FAST')
      })
      pdf.fromHTML(
         descricao
         , 87 // x coord - left
         , 50 // y coord - top
         , {'width': 113}
      )
      //line += 130
      pdf.addPage()
   }

   let arquivo = 'Orçamento-'+this.orcamento.id+'.pdf'

   function convertImgToBase64(url, callback, outputFormat){
      return new Promise(function (resolve, reject){
         let img = new Image()
         img.crossOrigin = 'anonymous'
         img.onload = function(){
            let canvas = document.createElement('CANVAS')
            let ctx = canvas.getContext('2d')
            canvas.height = this.height
            canvas.width = this.width

            ctx.drawImage(this,0,0,canvas.height,canvas.width)
            let dataURL = canvas.toDataURL(outputFormat || 'image/png')
            callback(dataURL)
            canvas = null
         };
         img.src = url
         resolve()
      })

   }
   setTimeout(function() {
      pdf.save(arquivo);
   }, 3000);
   //pdf.save(arquivo)
},

The problem is that the images are being placed at the end and superimposed. There should be an image with the text next to each page! For example the first image that should appear on the first page, appears on the last! I need type "wait" to load and convert the images before recording!

  • In git "Mrrio" I think I have the answer to the problem https://github.com/MrRio/jsPDF/issues/101

  • It is not the case of pageSplit, the problem is that the images are not being loaded. Now if I put an Alert and hope to give ok, it works!

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.