• 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

163
Vistas
Vue.js no puede mostrar pdf en una página nueva usando window.print ()

En page.vue, PDF Reader se usa para incrustar pdf en html y hay un botón para exportar pdf en la nueva página usando 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 es un componente que usa 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>

Cuando hago clic en el botón, la nueva página (printPage) no puede pdfk, es negra, pero en la página page.vue, el pdf se puede mostrar perfectamente. ¿Hay algo mal en el código? ¿O me estoy perdiendo algo?

Cualquier consejo sería apreciado Gracias.

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