1

Open PDF file in new tab using Angular 6. I tried this:

Rest controller:

@RestController
@RequestMapping("/downloads")
public class DownloadsController {

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

    @GetMapping("export")
    public ResponseEntity<InputStreamResource> export() throws IOException {
        ClassPathResource pdfFile = new ClassPathResource(EXTERNAL_FILE_PATH);

        HttpHeaders headers = new HttpHeaders();
        headers.add("Cache-Control", "no-cache, no-store, must-revalidate");
        headers.add("Pragma", "no-cache");
        headers.add("Expires", "0");

        return ResponseEntity.ok().headers(headers).contentLength(pdfFile.contentLength())
                .contentType(MediaType.parseMediaType("application/pdf"))
                .body(new InputStreamResource(pdfFile.getInputStream()));
    }
}

Service:

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

  constructor(private http: HttpClient) {
  }

  exportPdf() {
    return this.http.get(environment.api.urls.downloads.getPdf,  { responseType: 'blob' });
  }
}

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() {     
     window.open(this.downloadService.exportPdf());
  }
}

HTML code:

<h1 class="title">Export</h1>

<div class="content grid-wrapper">

  <div class="export">
      <button class="btn btn-secondary" (click)="export()">Export</button>
    </div>

</div>

What is the proper wya to implement the Angular service and component in order to open the PDF document into new tab when I click the button?

Can you advice?

Peter Penzov
  • 1,126
  • 134
  • 430
  • 808
  • You can't just use response from backend. You have to create Blob object and then create link and open it automatically or use for ``. See https://stackoverflow.com/questions/21628378/display-blob-pdf-in-an-angular-app for more details. @edit: thread is for Angular.JS but the part you need is written in vanilla js – Kamil Chlebek Nov 08 '18 at 21:50
  • https://stackoverflow.com/questions/35368633/angular-2-download-pdf-from-api-and-display-it-in-view this should help – Abhishek Ekaanth Nov 08 '18 at 22:14
  • I updated the answer with the implementation that I tried to implement but still I get error. Can you advice how to fix it? – Peter Penzov Nov 09 '18 at 11:04
  • can you post the response you are getting from server ? – programoholic Nov 09 '18 at 21:17
  • With the above code I get new tab with the same page: PDF document is not shown. – Peter Penzov Nov 09 '18 at 22:44

1 Answers1

1

you can try

export() {
    this.downloadService.exportPdf();
}

...

exportPdf(){
     window.open(environment.api.urls.downloads.getPdf);
}
Matt
  • 2,096
  • 14
  • 20