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.