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

Question

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.