12

I have URL of pdf file for exa url is "test.example.com/incoice/1/download?auth_token="some_token", when I visit this url, url will show me PDF in browser.

Now I want to open this pdf with print function, I mean user do not have to press CTRL+P I want to do this from my side.

I tried iframe but it gives me error of cross origin. This is demo code which i used

//first try let _printIframe; var iframe = _printIframe; if (!_printIframe) { iframe = _printIframe = document.createElement('iframe'); document.body.appendChild(iframe); iframe.style.display = 'none'; iframe.id = "printf"; iframe.name = "printf"; iframe.onload = function() { setTimeout(function() { iframe.focus(); iframe.contentWindow.print(); }, 1); }; } // second try // SRC of pdf iframe.src = "Some API URl " + "/download?access_token=" + this.authenticationService.currentTokenDetails.access_token; let url = iframe.src + "&output=embed"; window.frames["printf"].focus(); window.frames["printf"].print(); var newWin = window.frames["printf"]; newWin.document.write('<body onload="window.print()">dddd</body>'); newWin.document.close();

I created a demo in plunker for print pdf. http://embed.plnkr.co/WvaB9HZicxK6tC3OAUEw/ In this plunker i open pdf in new window but i want to directly print that pdf. how can i do that ?

Any suggestion will be appreciate, and you can correct if I am wrong. Thanks

Improve this question

3 Answers 3

Reset to default
37

So here I got the solution for my problem In my situation my API was returning binary data of pdf, and browser did not print that binary data into window.print, so for this first I convert binary data in blob data and then create Iframe for print Following is code for it.

const url = request URL // e.g localhost:3000 + "/download?access_token=" + "sample access token"; this.http.get(url, { responseType: ResponseContentType.Blob }).subscribe( (response) => { // download file var blob = new Blob([response.blob()], {type: 'application/pdf'}); const blobUrl = URL.createObjectURL(blob); const iframe = document.createElement('iframe'); iframe.style.display = 'none'; iframe.src = blobUrl; document.body.appendChild(iframe); iframe.contentWindow.print(); });

Here you go!! I hope this can help anyone have this problem :)

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

It is important to note, this doesn't work on Microsoft browsers (IE and Edge). Here is a question on how to solve that issue. If you simply want to open on save the blob you can reference this
Thanks, Is it any solution to print without print dialog box?
I think this will not work with firefox. See more: stackoverflow.com/questions/33254679/print-pdf-in-firefox
how can I print multiple files in one click
5

The previous solution may cause some security issues in newer browsers so we need to use the DOMSanitizer to make it a safe resource.

export class PrintPdfService { constructor(protected sanitizer: DomSanitizer) {} printPdf(res) { const pdf = new Blob([res], { type: 'application/pdf' }); const blobUrl = URL.createObjectURL(pdf); const iframe = document.createElement('iframe'); iframe.style.display = 'none'; iframe.src = this.sanitizer.sanitize(SecurityContext.RESOURCE_URL, this.sanitizer.bypassSecurityTrustResourceUrl(blobUrl)); document.body.appendChild(iframe); iframe.contentWindow.print(); } }

Angular DOMSanitizer

Improve this answer

Comments

-3

Look at https://github.com/devintyler/real-time-angular2/tree/master/plugin/print-pdf

simple and nice implementation.

Improve this answer

2 Comments

Okay i will try it
i tried it . but didn't work for me. Can you create a demo plunker ?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.