I'm am trying to upload a pdf file, convert it to a BLOB and download again as a pdf file. At the moment I get no errors but when I download the file I get a blank pdf with what looks like a corrupted file name.

I am saving the BLOB in the pdfFile vairable.

<input  type="file"
        @change="onNewFileUpload($event)">

async onNewFileUpload($event) {

      const file = $event.target['files'][0];
      const fileReader = new FileReader();

      const self = this;
      fileReader.onload = function() {
        pdfFile =  new Blob([fileReader.result], { type: "application/pdf" })
      }

      fileReader.readAsText(file);
},

<button
  @click="downloadPdfFile()"
  class="btn btn-success">Download pdfFile</button>

downloadBOBSCertificate() {
      const link = document.createElement('a');
      // create a blobURI pointing to our Blob
      // link.href = pdfFile;
      link.href = URL.createObjectURL(pdfFile);
      link.download = 'test.pdf';
      // some browser needs the anchor to be in the doc
      document.body.append(link);
      link.click();
      link.remove();
      // in case the Blob uses a lot of memory
      setTimeout(() => URL.revokeObjectURL(link.href), 7000);
}