1

I'm trying to implement example with opening PDF document from Angular 6 and Spring framework. I tried this:

private static final String EXTERNAL_FILE_PATH = "/Users/test/Documents/blacklist_api.pdf";

    @GetMapping(path="export") 
    public ResponseEntity<byte[]> export() throws IOException {
        File pdfFile = Paths.get(EXTERNAL_FILE_PATH).toFile();  

        byte[] fileContent = Files.readAllBytes(pdfFile.toPath());

        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.APPLICATION_PDF);
        // Here you have to set the actual filename of your pdf
        headers.setContentDispositionFormData(pdfFile.getName(), pdfFile.getName());
        headers.setCacheControl("must-revalidate, post-check=0, pre-check=0, no-cache, no-store, must-revalidate");
        headers.setPragma("no-cache");
        ResponseEntity<byte[]> response = new ResponseEntity<>(fileContent, headers, HttpStatus.OK);
        return response;
    }

Service:

@Injectable({
  providedIn: 'root'
})
export class DownloadService {

  constructor(private http: HttpClient) {
  }

  downloadPDF(): any {
    return this.http.get(environment.api.urls.downloads.getPdf, {
        responseType: 'blob'
      })
      .pipe(
        map((res: any) => {
          return res
        })
      );
    }  
}

Component:

@Component({
  selector: 'app-download',
  templateUrl: './download.component.html',
  styleUrls: ['./download.component.scss']
})
export class DownloadComponent implements OnInit {

  constructor(private downloadService: DownloadService,
              private router: Router,
              private route: ActivatedRoute) {
  }

  ngOnInit() {   
  }

  export() {               
    this.downloadService.downloadPDF().subscribe(res => {
      const fileURL = URL.createObjectURL(res);
      window.open(fileURL, '_blank');
    });         
  } 
}

I can download the file in new tab but I have to click enable popup. Is there are way to implement this without manually clicking on enable popup? Probably I need to change the type of the returned object?

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Peter Penzov
  • 1,126
  • 134
  • 430
  • 808
  • It looks like your PDF file is on the same server as the service. In that case, I'd suggest serving the file with SpringBoot, either by moving the file into the static folder in your resources or by overwriting the `addResourceHandlers` configuration. Would that be feasable in your case? – pascalpuetz Nov 10 '18 at 21:05
  • Can you should me how to configure addResourceHandlers? – Peter Penzov Nov 10 '18 at 21:09
  • Try this guide: https://spring.io/blog/2013/12/19/serving-static-web-content-with-spring-boot – pascalpuetz Nov 10 '18 at 21:12
  • Oh and if you use that approach, just open the location without first downloading the PDF file (e.g. `window.open('/my/static/file.pdf', '_blank');`) – pascalpuetz Nov 10 '18 at 21:13
  • Ok but probably it should be more appropriate to configure Angular not Spring for which content to allow for popup? – Peter Penzov Nov 10 '18 at 21:15
  • Note that in my dev env PDF file is on the same server as the service but in prod they will be on different instances so I need to get the file content with Angular. – Peter Penzov Nov 10 '18 at 21:18
  • In that case, you should change your method to simply produce application/pdf type and open that in your angular application directly. An example can be found here: https://stackoverflow.com/questions/44891928/displaying-pdf-from-base64-string-with-spring-java Beware: The example is retreiving base64 encoded pdfs, you have to skip the decoding part. – pascalpuetz Nov 10 '18 at 21:52
  • Can you paste official code example so I can rate it, please? – Peter Penzov Nov 10 '18 at 21:59

0 Answers0