PDF generated with duplicate pages

[EnderMaldonado]

I am trying to export the PDF I created and it prints the pages 2 times

This is my code in React with Typescript:

import React, { useEffect, useRef } from 'react'
import Templ from './Template'
import { Form, Template } from '@pdfme/ui'
import { generate } from '@pdfme/generator'
import fileDownload from 'js-file-download'

const ContractTemplate = ({data}) => {

  const designerRef = useRef<Form>()

  //Download PDF Template with the Inputs values <<<<============================= This is the Generator Method ❗❗
  const handleDownloadPdf = () => {
    generate({
      template:designerRef.current.getTemplate(),
      inputs:designerRef.current.getInputs()
    })
    .then((pdf) => {
      fileDownload(new Blob([pdf.buffer], { type: 'application/pdf' }), data.title+'.pdf')
    })
  }

  useEffect(()=>{
    if(data && data.template) {
      
      //Prepare Editor values
      const template = data.template as Template
      const domContainer = document.getElementById('pdf-editor')

      const inputs = template.schemas.map(schema => {
        const input = {}
        Object.keys(schema).forEach(key => {
          input[key] = schema[key].type==='text' ? '' : template.sampledata[0][key]
        })
        return input
      })

      //Generate PDFME Form
      designerRef.current = new Form({ domContainer, template, inputs })
    }

    //Destroy when exit
    return () => {
      if(designerRef.current)
        designerRef.current.destroy()
    }
  }, [])

  
  return <React.Fragment>
    <Templ {...{data, handleDownloadPdf}}/>
  </React.Fragment>
}

And this is the JSON data that I pass in the Generator Method :
The basePdf var of the Template Object is a public URL of the Firebase server
You can open the url to check

{
   "template":{
      "sampledata":[
         {
            "field1":"tipe here"
         }
      ],
      "schemas":[
         {
            "field1":{
               "lineHeight":1,
               "height":32.13,
               "characterSpacing":0,
               "width":86.59,
               "fontSize":30,
               "position":{
                  "x":40.22,
                  "y":57.95
               },
               "alignment":"left",
               "type":"text"
            }
         },
         {
            
         }
      ],
      "columns":[
         "field1"
      ],
      "basePdf":"https://firebasestorage.googleapis.com/v0/b/macaw-megalopolis.appspot.com/o/pdf_files%2Fpage__1.pdf?alt=media&token=c45eb42c-7a9c-410f-9801-212a7f89e806"
   },
   "inputs":[
      {
         "field1":"asdas"
      },
      {
         
      }
   ]
}

And this is the result:

What am I doing wrong? why does it throw me duplicate pages?
It seems that it first uses the pages with edited values and then puts them back without the edited values.

[EnderMaldonado]

I was able to solve my problem by using the pdf-lib to remove the extra pages.

You just have to replace the handleDownloadPdf function that I had in the original code with this one here:

//Download PDF Template with the Inputs values
  const handleDownloadPdf = () => {
    generate({
      template:designerRef.current.getTemplate(),
      inputs:designerRef.current.getInputs()
    })
    .then(async (pdf) => {

      // Using pdf-lib for delete the pages
      const pdfDoc = await PDFDocument.load(pdf.buffer)
      const totalPages = designerRef.current.getTemplate().schemas.length
      for (let i = 0; i < totalPages; i++) {
        pdfDoc.removePage(totalPages)
      }
      const array = await pdfDoc.save()
      fileDownload(new Blob([array.buffer], { type: 'application/pdf' }), data.title+'.pdf')
    })

  }

pdf-lib source https://pdf-lib.js.org/

[hand-dot]

I'll answer in the discussion(#75).