0

Estoy trabajando sobre un proyecto con vue js en quasar y estoy creando una función para exportar el contenido de mi página a PDF

este es el código de la función:

downloadPDF() {
        
            const doc = new jsPDF();
            const contentHtml = this.$refs.content.innerHTML;
            doc.fromHTML(contentHtml, 15, 15, {
              width: 170
            });
            doc.save("sample.pdf");
        },

y este es mi archivo vue en donde a mi tepmlate le agregué una etiqueta "content"

<template ref="content">
  <div>
    <q-page class="centrar-contenido">
      <div  class="container q-py-md q-px-lg q-mb-xs contenedorDatos" style="background: radial-gradient(circle, #F4EBE910 0%, #F1E8DE 100%)">
          <div class="row">
                <q-btn class="row col-xs-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 q-pr-xl contenedorVisualizacion">
                  <b @click="abrirModalCorto" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 q-py-lg">
                    <div></div>
                    <div style="color:#DA8800;font-size: 15px;">Carga Financiera Corto Plazo: {{porcentajeCortoPlazo}}%</div>
                  </b>
                </q-btn>
                <q-btn class="row col-xs-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 q-pl-md q-pr-md contenedorVisualizacion">
                  <b @click="abrirModalLargo" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 q-py-lg">
                    <div></div>
                    <div style="color:#DA8800;font-size: 15px;">Carga Financiera Largo Plazo: {{porcentajeLargoPlazo}}%</div>
                  </b>
                </q-btn>
                <q-btn class="row col-xs-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 q-pl-xl contenedorVisualizacion">
                  <b @click="abrirModalTotal" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12  q-py-lg">
                    <div></div>
                    <div style="color:#DA8800;font-size: 15px;">Carga Financiera Total: {{porcentajeFinancieraTotal}}%</div>
                  </b> 
                </q-btn>
            </div>
        </div>

AL momento de ejecutar esta función esta me devuelve un "INNERHTML is not function", si me pudieran ayudar o como utilizar bien esta librería, lo que deseo es que el contenido de mi página se pueda exportar a pdf

1 respuesta 1

0

Intenta mover ref a tu div más cercano. También asegurate de cerrar correctamente las etiquetas HTML.

<template>
    <div ref="content">
      <q-page class="centrar-contenido">
        <div  class="container q-py-md q-px-lg q-mb-xs contenedorDatos" style="background: radial-gradient(circle, #F4EBE910 0%, #F1E8DE 100%)">
            <div class="row">
                  <q-btn class="row col-xs-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 q-pr-xl contenedorVisualizacion">
                    <b @click="abrirModalCorto" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 q-py-lg">
                      <div></div>
                      <div style="color:#DA8800;font-size: 15px;">Carga Financiera Corto Plazo: {{porcentajeCortoPlazo}}%</div>
                    </b>
                  </q-btn>
                  <q-btn class="row col-xs-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 q-pl-md q-pr-md contenedorVisualizacion">
                    <b @click="abrirModalLargo" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 q-py-lg">
                      <div></div>
                      <div style="color:#DA8800;font-size: 15px;">Carga Financiera Largo Plazo: {{porcentajeLargoPlazo}}%</div>
                    </b>
                  </q-btn>
                  <q-btn class="row col-xs-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 q-pl-xl contenedorVisualizacion">
                    <b @click="abrirModalTotal" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12  q-py-lg">
                      <div></div>
                      <div style="color:#DA8800;font-size: 15px;">Carga Financiera Total: {{porcentajeFinancieraTotal}}%</div>
                    </b>
                  </q-btn>
              </div>
          </div>
      </q-page>
    </div>
</template>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.