Загрузка байтового массива из Spring Boot в Vue интерфейс

Question

У меня есть следующие функции, я пытаюсь прочитать строку из моей базы данных MongoDB, которая представляет собой изображение, расшифровать его и отправить его на мой Vue интерфейс для загрузки.

@GetMapping(path = "/signature/{signatureId}", produces = MediaType.IMAGE_PNG_VALUE)
public byte[] downloadSignature(String signatureId) {
        Signature signature = routeRepository.findBySignature(signature);

        byte[] bytes = Base64.getDecoder().decode(signature.getSignature().getBytes(StandardCharsets.UTF_8));


        // This try-catch just saves the signature locally for testing
        // This works successfully so I know there isn't an issue with the byte array
        try {
            Files.write(bytes, new File("signature.png"));
        } catch (IOException e) {
            e.printStackTrace();
        }

        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.IMAGE_PNG);
        headers.setContentLength(bytes.length);
        headers.setCacheControl(CacheControl.noCache().getHeaderValue());

        return new ResponseEntity<>(bytes, headers, HttpStatus.OK);
}

На моем Vue внешний интерфейс, у меня есть следующее

  async downloadSignature(context, payload) {
    await Route.downloadSignature(context.rootState.User.user, payload)
      .then(({ data }) => {
        const url = window.URL.createObjectURL(
          new Blob([data], { type: "image/png" })
        );
        const link = document.createElement("a");
        link.href = url;
        link.setAttribute("download", "signature.png");
        document.body.appendChild(link);
        link.click();
      })
      .catch(() => {
        Message.error("Something went wrong, please try again.");
      });
  }

Все работает успешно, но при загрузке файла возникает проблема с файлом, и я не могу открыть его успешно

Answer 1

С Ax ios вам нужно указать в заголовках запроса, что тип ответа - BLOB-объект

Примерно так:

Vue.axios.get(resource, { responseType: "blob" });

Довольно плохая документация по этому вопросу.