Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using ref as pdf-content does not print layout html report #169

Open
Amkha opened this issue Feb 23, 2023 · 1 comment
Open

Using ref as pdf-content does not print layout html report #169

Amkha opened this issue Feb 23, 2023 · 1 comment
Assignees

Comments

@Amkha
Copy link

Amkha commented Feb 23, 2023

Describe the bug
When using ref in div tage, it print only when the data is available. Whithout data just print blank page since data_pdf is null.
the data_pdf is content html from parent component referring by ref in div tag. below is my code

  1. Parent component:
<!-- <template>
  <v-container>
    <div ref="section_trial_balance" id="tblData">
           <table>
                        <tr class="pa-2">
                            <th style="width: 500px; text-align: center;">Description</th>
                        </tr>
                        <tr class="pa-2 tr0">
                            <td class="pa-2 td0">{{0}}</td>
                        </tr>
            <table>
   </div> 
<SideBarRight @clicked="onClickChild" :fromdate="from_date" :todate="to_date" :repno="rep_no" :data_excel="t_balance" :tableId="'tblData'" :data_pdf="this.$refs.section_trial_balance"></SideBarRight>
</v-container>
</template>   -->
data: () => ({
           trial_balance: []
})
  1. Child component(SideBar-Right):
<template>
       <div>
        <vue-html2pdf
          :show-layout="false"
          :float-layout="false"
          :enable-download="true"
          :preview-modal="true"
          :paginate-elements-by-height="1100"
          :pdf-quality="2"
          :manual-pagination="true"
          pdf-format="a4"
          pdf-orientation="portrait"
          pdf-content-width="800px"
          @hasStartedGeneration="hasStartedGeneration()"
          @hasGenerated="hasGenerated($event)"
          ref="html2Pdf"
          filename="mcfin_filename"
          <section slot="pdf-content">
              <v-container>
                     <v-card v-html="html_doc"></v-card>
               </v-container>
          </section>
        </vue-html2pdf>
      </div>
</template>
import VueHtml2pdf from 'vue-html2pdf'
  export default {
    name: 'side-bar-right',
    components: {
       VueHtml2pdf
    },
    props: ['data_excel', 'tableId','data_pdf','repno', 'to_date'],
    data () {
      return {
        pdf_filename: '',
        html_doc: '',
        }
     }
methods: {
      exportPdf(){
        console.log("PDF:", this.data_pdf)      // this gives null when no data generated and not print layout <table>
        this.html_doc = this.data_pdf.outerHTML 
        this.$refs.html2Pdf.generatePdf()
      },
}

jason.package:
"sass": "^1.56.1",
"sass-loader": "^8.0.2",
"vue": "^2.6.12",
"vue-loader": "^15.9.5",
"vue-template-compiler": "^2.6.10"
"vue-html2pdf": "^1.8.0",
"vuetify": "^2.6.12",
"vue-router": "^3.5.1",
"vuex": "^3.6.2",

And handle event gives some errors
Please help !!!!

@Amkha
Copy link
Author

Amkha commented Feb 23, 2023

not visible either here....

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants