使用 Java 和 Angular 5 下载 BLOB 到 PDF

Question

我正在尝试在角度 5 上实现从 db 下载 pdf 的逻辑。我在下载文件中遇到问题。文件已下载，但在打开时抛出错误 - “加载失败”。

我查看了很多博客和问题/答案，但无法在我的代码中找到错误。

In Database -> pdf file content saved as BLOB

Rest 网络服务 -> 在下面的代码中，pdfData 是来自 BLOB 类型列的数据，这里是 java 代码中的 byte[]

@GetMapping("downloadReport/{reportId}")
public StreamingResponseBody downloadDocument(byte[] pdfData) {
        return outputStream -> {
        //This way working for sample
            /*try (InputStream inputStream = new ByteArrayInputStream(
                    Files.readAllBytes(Paths.get("D:/pdfWithoutPassword.pdf")))) {
                IOUtils.copy(inputStream, outputStream);
            }*/
        //This way not working when data fetched from Database
            try (InputStream inputStream = new ByteArrayInputStream(pdfData)) {
                IOUtils.copy(inputStream, outputStream);
            }
            outputStream.close();
        };

Angular 5 代码

downloadReport(reportType: string, reportId: string) {
        let fileDownloadUrl = environment.apiUrl + "/downloadReport" + "/" + reportId;

        return this.httpClient
            .get(fileDownloadUrl, { observe: 'response', responseType: "blob"})
            .subscribe(response => this.saveFileToSystem(response.body)),
            error => console.log("Error downloading the file."),
            () => console.info("OK");
    }

       saveFileToSystem(input: any) {
        const blob = new Blob([input], { type: 'application/octet-stream' });
        saveAs(blob, "testingpdf1.pdf");
    }

寻求帮助以解决此问题。提前致谢！

Answer 1

这是我做的另一种方式，你可以改变：

@RequestMapping(value = "/generateReport", method = RequestMethod.POST)
  public ResponseEntity<byte[]> generateReport(){

    HttpHeaders headers = new HttpHeaders();
    headers.setContentType(MediaType.parseMediaType("application/pdf"));
    StringBuilder filename = new StringBuilder("MyPdfName").append(".pdf");

    byte[] bytes = pdfGeneratorService.generatePDF();
    headers.add("content-disposition", "inline;filename=" + filename.toString());

    headers.setCacheControl("must-revalidate, post-check=0, pre-check=0");
    ResponseEntity<byte[]> response = new ResponseEntity<byte[]>(bytes, headers, HttpStatus.OK);
    return response;
}

Answer 2

试试这个：

来自您的 html 页面

 <a href="javascript:void(0);" (click)="generatePdf()"> YourPdf.pdf </a>

从你的 js 文件中

generatePdf() {

this.yourService.generatePdf()
     .subscribe(pdf => {
     let mediaType = 'application/pdf';
     let blob = new 
     Blob([this.converterService.base64ToArrayBuffer(pdf.pdfByteArray)], { type: mediaType });
    saveAs(blob, fileName);
  }, err => {
    console.log('Pdf generated err: ', JSON.stringify(err));
  });

}

您的转换器服务：

import { Injectable } from "@angular/core";

@Injectable()
export class ConverterService {

base64ToArrayBuffer(base64) {
    var binaryString = window.atob(base64);
    var binaryLen = binaryString.length;
    var bytes = new Uint8Array(binaryLen);
    for (var i = 0; i < binaryLen; i++) {
        var ascii = binaryString.charCodeAt(i);
        bytes[i] = ascii;
    }
      return bytes;
   }
  }