• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

161
Vistas
Vue.js cannot show pdf in new page using window.print()

In page.vue, PDF Reader is used to embed pdf into html and there are a button to export pdf in the new page using window.print()

<template>

    <button class="btn ml-1"@click="handleWindowPrint()">Export PDF</button>
....
    <div class="pdf-export" v-for="record in pdfRecords" :key="record.key">
        <PdfReader :documentUrl="record" @onclick-remove-pdf-btn="removePdfRecord" />
    </div
....
</template>

handleWindowPrint() {
    const printPage = window.open('', '_blank')
    const pdf = document.querySelector('.pdf-export')
    const view = {
        ...
    };
    const html = Mustache.render(`${this.templateUsed}`, view);
    if (printPage) {
        printPage.document.head.innerHTML =
            '<meta charset="utf-8">\n' +
            ' <meta name="format-detection" content="telephone=no">\n' +
            ' <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">\n' +
            ' <meta name="viewport" content="width=device-width,initial-scale=1.0">\n'
        
        printPage.document.body.innerHTML = html + pdf?.outerHTML
        setTimeout(() => {
            printPage.print();
        }, 500);
    }
}

PdfReader is a component that using vue-pdf:

<template>
  <div>
    <label><small>(Perview Three Page)</small></label>
    <figure class="image-item pdf-item">  
      <a >
        <pdf :key="i" :src="url"  v-for="i in numPages" :page="i"></pdf>
      </a>
    </figure>
  </div>
</template>
<script>
import pdf from "vue-pdf";

export default {
  name: "PdfReader",
  props: ["documentUrl", "removeable"],
  components: {
    pdf,
  },
  data: function () {
    return {
      url: this.documentUrl,
      numPages: 3,
    };
  },
</style>

When I click button, new page (printPage) cannot pdfk it is black, but in page.vue page, pdf can display perfectly. Is anything wrong in the code? Or am I missing something?

Any advice would be appreciated Thank you.

almost 3 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda