java - 从 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

使用 Axios，您需要在请求 header 中指定响应类型是 blob

像这样

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

这方面的文档非常糟糕。