[QUESTION] Close button destroys pdf object ? about vue-html2pdf

[kempsteven]

Have you tried what I suggested? What I'm guessing the issue is that the object was updated but the changed has not yet rendered on the dom, so to force the rerender we add that key on the element.

This is just for debugging purposes but can you also add a settimeout on the generateReport, like this:

setTimeout(() => {
    self.$refs.PlantillaPdf.generateReport(self.data_pdf)
}, 1000)

If things worked by adding the settimeout, and key its definitely a render issue.

One more thing to try is using this.$set, details about it here

// im guessing self is equal to this
self.$set(self.data_pdf, 'total', response.data.total)
self.$set(self.data_pdf, 'paciente ', response.data.paciente.nombre+' '+response.data.paciente.apellidos)
self.$set(self.data_pdf, 'rut_paciente ', response.data.paciente.rut)
...and so on

[Master-Y0da]

adding this works fine! :

<div class="html2pdf__page-break"/>

[kempsteven]

Cool :)

[kempsteven]

Can I also see the code for the (element/component) you are trying to generate a pdf from?

[Master-Y0da]

The content that doesn't update is all before the v-for table. Here it is:

         <section slot="pdf-content">
            <!-- PDF Content Here -->
            <img src="@/assets/Logo_smile.png" width="160" alt="">
          <div >              
            <div style="text-align:center">                  
                <h1>Presupuesto Dental</h1>
            </div>
            <v-container style="margin-top:6%">
                <v-row dense >
                    <v-col class="col-md-5" >
                      <h5>Dra: </h5>
                      <p>Daniela Navarro</p>
                    </v-col>
                    <v-col class="col-md-6">
                      <h5>Rut: </h5>
                      <p>18.079.719-k</p>
                    </v-col>
                </v-row>
                <v-row dense style="margin-top:2%;">
                    <v-col class="col-md-5">
                      <h5>Paciente: </h5>
                      <p>{{desserts.paciente}}</p>
                    </v-col>
                    <v-col class="col-md-6">
                      <h5>Rut: </h5>
                      <p>{{desserts.rut_paciente}}</p>
                    </v-col>
                </v-row>
                <v-row dense style="margin-top:2%;">
                    <v-col class="col-md-5">
                      <h5>Convenio: </h5>
                      <p>{{desserts.convenio}}</p>
                    </v-col>
                    <v-col class="col-md-6">
                      <h5>Fecha: </h5>
                      <p>{{desserts.fecha}}</p>
                    </v-col>
                </v-row>
                <v-simple-table style="margin-top:5%;">
                    <template v-slot:default>
                        <thead>
                            <tr>
                            <th class="text-left">
                                Prestación
                            </th>
                            <th class="text-left">
                                Descripción
                            </th>
                            <th style="padding-left:10%;">
                                Valor
                            </th>
                            </tr>
                        </thead>
                    <tbody>
                        <tr
                        v-for="(item, key) in desserts.tratamiento"
                        :key="key"
                        >
                            <td style="padding-top:20px">
                              {{item.nombre}}
                            </td>
                            <td>
                              {{item.descripcion}}
                            </td>
                            <td style="padding-left:10%;">{{item.costo}}</td>
                        </tr>                            
                        <tr>
                          <td></td>
                          <td></td>
                          <td ><span>Total: </span><span style="padding-left:25%;">{{desserts.total}}</span></td>                              
                        </tr>
                        <tr>
                          <td></td>
                          <td></td>
                          <td v-if="desserts.descuento > 0"><span>Descuento: </span><span style="padding-left:10%;">{{desserts.descuento}}%</span></td>
                        </tr>
                        <tr>
                          <td></td>
                          <td></td>
                          <td v-if="desserts.descuento > 0"><span>Total final: </span><span style="padding-left:10%;">{{desserts.total_descuento}}</span></td>
                        </tr>
                    </tbody>
                    </template>
                </v-simple-table>

                <v-row>
                  <v-col class="col-md-4" style="margin: 0 auto;">
                    <v-banner
                      single-line                          
                    >
                      Firma Tratante
                    </v-banner>
                  </v-col>
                </v-row>
                <div style="margin-top:60px;">
                  <p>
                      Este documento tiene vigencia de 30 días
                    </p>
                </div>
              </v-container>
        </div>
    </section>`

[kempsteven]

Hmm i think this is a rendering issue. does the desserts have an id?
can you try adding a key on the slot, like this:

<section slot="pdf-content" :key="desserts.id">

So what would happen here is when you assign a different desserts this.desserts = obj; the slot will re-render because the desserts.id changed and should display the new data.

[Master-Y0da]

I have an axios call whit different Id, for each row of the table...like this:

        this.$axios.get(process.env.VUE_APP_API_URL+'admin/presupuestos/'+obj.id) <---id per row
        .then(function (response){
          console.log(response)
          var today = new Date();
          var date = today.getDate()+'-'+(today.getMonth()+1)+'-'+today.getFullYear();

          self.data_pdf.total = response.data.total;
          self.data_pdf.paciente = response.data.paciente.nombre+' '+response.data.paciente.apellidos;
          self.data_pdf.rut_paciente = response.data.paciente.rut;
          self.data_pdf.convenio = (response.data.paciente.convenio != null)? response.data.paciente.convenio.institucion : 'No Aplica';
          self.data_pdf.fecha = date
          self.data_pdf.total_descuento = response.data.total_descuento
          self.data_pdf.descuento = (response.data.paciente.convenio != null)? response.data.paciente.convenio.descuento : 0;
          self.data_pdf.tratamiento = response.data.tratamiento
          self.$refs.PlantillaPdf.generateReport(self.data_pdf)    <----  calling pdf component and assign dessert object
        })`

When I do console.log in generateReport method...the object is always different...so I don't understand your suggestion, I think it's the same functionality.

[Master-Y0da]

Is there any way of clean the dessert object after click the close button ?

[Master-Y0da]

It works!!...adding set did the work!!...Thank you so much for your patience and predisposition.

Now I'm facing this hahaha caption.

Don't know why it truncates the content...it's just some h1 and p tags...