Blank PDF when downloading VueJS - Spring Boot

Question

Im trying to generate a PDF in backend and send it to the frontend, but when I get the download executed, the document shows everything in blank.

I have tried to send the document as a ResponseEntity with a File, and now I'm doing it in bytes array, but the same error occurs in both cases.

Here is my code:

// Backend

• Service

   public byte[] buildReportFile(Integer reportId, List<Annex> annexList) throws DocumentTemplateException, IOException {
        PdfConfiguration config = this.createPdfConfiguration(reportRepository.getById(reportId));
        File pdfFile = pdfService.createPdfFromTemplate(config);
        if(annexList.size() > 0) {
            File tmpPdfCopy = new File("/tmp/" + pdfFile.getName());
            FileUtils.copyFile(pdfFile, tmpPdfCopy);
            List<File> annexFileList = new ArrayList<>();
            annexFileList.add(tmpPdfCopy);
            for(Annex annex : annexList) {
                annexFileList.add(new File(annex.getDocumentPath()));
            }
            pdfService.concat(annexFileList, pdfFile);
            tmpPdfCopy.delete();
        }
        Path filepath = Paths.get(config.getPdfPath());
        Resource resource = null;
        try {
            resource = new UrlResource(filepath.toUri());
        } catch (IOException e) {
            throw new IOException("An error occurred while reading the file");
        }
        byte[] bytes;
        InputStream is = null;
        try {
            is = resource.getInputStream();
            bytes = is.readAllBytes();
        } catch (IOException e) {
            throw new IOException("An error occurred while reading the file");
        } finally {
            try {
                if (is != null) {
                    is.close();
                }
            } catch (IOException e) {
                throw new IOException("An error occurred while reading the file");
            }
        }
        return bytes;
    }

Another approach for the service:

public byte[] buildReportFile(Integer reportId, List<Annex> annexList) throws DocumentTemplateException, IOException {
        PdfConfiguration config = this.createPdfConfiguration(reportRepository.getById(reportId));
        File pdfFile = pdfService.createPdfFromTemplate(config);
        if(annexList.size() > 0) {
            File tmpPdfCopy = new File("/tmp/" + pdfFile.getName());
            FileUtils.copyFile(pdfFile, tmpPdfCopy);
            List<File> annexFileList = new ArrayList<>();
            annexFileList.add(tmpPdfCopy);
            for(Annex annex : annexList) {
                annexFileList.add(new File(annex.getDocumentPath()));
            }
            pdfService.concat(annexFileList, pdfFile);
            tmpPdfCopy.delete();
        }
        byte[] bytes = FileUtils.readFileToByteArray(pdfFile);
        return bytes;
    }

• Controller

@PostMapping(value = "build/{reportId}")
    public byte[] buildReportFileVersion(@PathVariable Integer reportId, @RequestBody List<Annex> annexToAppendList) throws DocumentTemplateException, IOException {
        return reportFileVersionService.buildReportFile(reportId, annexToAppendList);
    }

// Frontend

• Function which executed the PDF generation and gets the download

downloadAnnex (annexId) {
        annexService.downloadAnnexFile(annexId).then(res => {
        const file = new Blob([res.data], { type: 'application/pdf' })
        const fileURL = URL.createObjectURL(file)
        window.open(fileURL)
      }).catch(err => console.log(err))
}).catch(err => console.log(err))

Anyone knows what can be happenning?

In addition, this is the object that is being returned by the service:

Thanks for reading!

Answer 1

The problem was that it was needed a header configuration for responseType in the service call.

    import axios from 'axios'
    
    export default {
      buildReportFileVersion (reportId, annexToAppendList) {
        return axios.post(
          `${process.env.VUE_APP_PREVING_API_HOST}/report/file/build/${reportId}`,
          annexToAppendList, {
            responseType: 'blob'
          }
        )
      }
    }