I need to generate a pdf with one image per page

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 overlapped. Should be an image with the text next to it on each page! For example the first image that should appear on the first page appears on the last page! I need to type "wait" to load and convert the images before recording!

    
asked by anonymous 16.07.2018 / 23:16

0 answers