Open PDF file in new tab
up vote
0
down vote
favorite
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?
angular typescript angular6
add a comment |
up vote
0
down vote
favorite
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?
angular typescript angular6
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<embed>
. See stackoverflow.com/questions/21628378/… for more details. @edit: thread is for Angular.JS but the part you need is written in vanilla js
– Kamil Chlebek
Nov 8 at 21:50
stackoverflow.com/questions/35368633/… this should help
– Abhishek Ekaanth
Nov 8 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 9 at 11:04
can you post the response you are getting from server ?
– programoholic
Nov 9 at 21:17
With the above code I get new tab with the same page: PDF document is not shown.
– Peter Penzov
Nov 9 at 22:44
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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?
angular typescript angular6
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?
angular typescript angular6
angular typescript angular6
edited Nov 9 at 22:47
asked Nov 8 at 21:40
Peter Penzov
457177371
457177371
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<embed>
. See stackoverflow.com/questions/21628378/… for more details. @edit: thread is for Angular.JS but the part you need is written in vanilla js
– Kamil Chlebek
Nov 8 at 21:50
stackoverflow.com/questions/35368633/… this should help
– Abhishek Ekaanth
Nov 8 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 9 at 11:04
can you post the response you are getting from server ?
– programoholic
Nov 9 at 21:17
With the above code I get new tab with the same page: PDF document is not shown.
– Peter Penzov
Nov 9 at 22:44
add a comment |
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<embed>
. See stackoverflow.com/questions/21628378/… for more details. @edit: thread is for Angular.JS but the part you need is written in vanilla js
– Kamil Chlebek
Nov 8 at 21:50
stackoverflow.com/questions/35368633/… this should help
– Abhishek Ekaanth
Nov 8 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 9 at 11:04
can you post the response you are getting from server ?
– programoholic
Nov 9 at 21:17
With the above code I get new tab with the same page: PDF document is not shown.
– Peter Penzov
Nov 9 at 22:44
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
<embed>
. See stackoverflow.com/questions/21628378/… for more details. @edit: thread is for Angular.JS but the part you need is written in vanilla js– Kamil Chlebek
Nov 8 at 21:50
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
<embed>
. See stackoverflow.com/questions/21628378/… for more details. @edit: thread is for Angular.JS but the part you need is written in vanilla js– Kamil Chlebek
Nov 8 at 21:50
stackoverflow.com/questions/35368633/… this should help
– Abhishek Ekaanth
Nov 8 at 22:14
stackoverflow.com/questions/35368633/… this should help
– Abhishek Ekaanth
Nov 8 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 9 at 11:04
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 9 at 11:04
can you post the response you are getting from server ?
– programoholic
Nov 9 at 21:17
can you post the response you are getting from server ?
– programoholic
Nov 9 at 21:17
With the above code I get new tab with the same page: PDF document is not shown.
– Peter Penzov
Nov 9 at 22:44
With the above code I get new tab with the same page: PDF document is not shown.
– Peter Penzov
Nov 9 at 22:44
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
you can try
export() {
this.downloadService.exportPdf();
}
...
exportPdf(){
window.open(environment.api.urls.downloads.getPdf);
}
This is for the component of for the service?
– Peter Penzov
Nov 9 at 8:29
the service. get rig of thengOnInit
in the component. and just call the services newexport
from the componentsexport
– Matt
Nov 9 at 15:29
Can you update you answer please with working example?
– Peter Penzov
Nov 9 at 15:32
I updated the code that I tried to implement but when I press the button nothing happens. Any idea why?
– Peter Penzov
Nov 9 at 20:58
updated answer code
– Matt
Nov 9 at 21:04
|
show 3 more comments
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
you can try
export() {
this.downloadService.exportPdf();
}
...
exportPdf(){
window.open(environment.api.urls.downloads.getPdf);
}
This is for the component of for the service?
– Peter Penzov
Nov 9 at 8:29
the service. get rig of thengOnInit
in the component. and just call the services newexport
from the componentsexport
– Matt
Nov 9 at 15:29
Can you update you answer please with working example?
– Peter Penzov
Nov 9 at 15:32
I updated the code that I tried to implement but when I press the button nothing happens. Any idea why?
– Peter Penzov
Nov 9 at 20:58
updated answer code
– Matt
Nov 9 at 21:04
|
show 3 more comments
up vote
0
down vote
you can try
export() {
this.downloadService.exportPdf();
}
...
exportPdf(){
window.open(environment.api.urls.downloads.getPdf);
}
This is for the component of for the service?
– Peter Penzov
Nov 9 at 8:29
the service. get rig of thengOnInit
in the component. and just call the services newexport
from the componentsexport
– Matt
Nov 9 at 15:29
Can you update you answer please with working example?
– Peter Penzov
Nov 9 at 15:32
I updated the code that I tried to implement but when I press the button nothing happens. Any idea why?
– Peter Penzov
Nov 9 at 20:58
updated answer code
– Matt
Nov 9 at 21:04
|
show 3 more comments
up vote
0
down vote
up vote
0
down vote
you can try
export() {
this.downloadService.exportPdf();
}
...
exportPdf(){
window.open(environment.api.urls.downloads.getPdf);
}
you can try
export() {
this.downloadService.exportPdf();
}
...
exportPdf(){
window.open(environment.api.urls.downloads.getPdf);
}
edited Nov 9 at 21:03
answered Nov 8 at 22:04
Matt
700212
700212
This is for the component of for the service?
– Peter Penzov
Nov 9 at 8:29
the service. get rig of thengOnInit
in the component. and just call the services newexport
from the componentsexport
– Matt
Nov 9 at 15:29
Can you update you answer please with working example?
– Peter Penzov
Nov 9 at 15:32
I updated the code that I tried to implement but when I press the button nothing happens. Any idea why?
– Peter Penzov
Nov 9 at 20:58
updated answer code
– Matt
Nov 9 at 21:04
|
show 3 more comments
This is for the component of for the service?
– Peter Penzov
Nov 9 at 8:29
the service. get rig of thengOnInit
in the component. and just call the services newexport
from the componentsexport
– Matt
Nov 9 at 15:29
Can you update you answer please with working example?
– Peter Penzov
Nov 9 at 15:32
I updated the code that I tried to implement but when I press the button nothing happens. Any idea why?
– Peter Penzov
Nov 9 at 20:58
updated answer code
– Matt
Nov 9 at 21:04
This is for the component of for the service?
– Peter Penzov
Nov 9 at 8:29
This is for the component of for the service?
– Peter Penzov
Nov 9 at 8:29
the service. get rig of the
ngOnInit
in the component. and just call the services new export
from the components export
– Matt
Nov 9 at 15:29
the service. get rig of the
ngOnInit
in the component. and just call the services new export
from the components export
– Matt
Nov 9 at 15:29
Can you update you answer please with working example?
– Peter Penzov
Nov 9 at 15:32
Can you update you answer please with working example?
– Peter Penzov
Nov 9 at 15:32
I updated the code that I tried to implement but when I press the button nothing happens. Any idea why?
– Peter Penzov
Nov 9 at 20:58
I updated the code that I tried to implement but when I press the button nothing happens. Any idea why?
– Peter Penzov
Nov 9 at 20:58
updated answer code
– Matt
Nov 9 at 21:04
updated answer code
– Matt
Nov 9 at 21:04
|
show 3 more comments
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53216553%2fopen-pdf-file-in-new-tab%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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
<embed>
. See stackoverflow.com/questions/21628378/… for more details. @edit: thread is for Angular.JS but the part you need is written in vanilla js– Kamil Chlebek
Nov 8 at 21:50
stackoverflow.com/questions/35368633/… this should help
– Abhishek Ekaanth
Nov 8 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 9 at 11:04
can you post the response you are getting from server ?
– programoholic
Nov 9 at 21:17
With the above code I get new tab with the same page: PDF document is not shown.
– Peter Penzov
Nov 9 at 22:44