如何在 Angular 2 中打印 PDF
[英]How to Print Pdf in Angular 2
问题描述
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.
我有exa url的pdf文件的URL是“test.example.com/incoice/1/download?auth_token =“some_token”，当我访问这个url时，url会在浏览器中显示PDF。
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.现在我想用打印功能打开这个 pdf，我的意思是用户不必按CTRL+P我想从我身边做这个。
I tried iframe but it gives me error of cross origin.我试过 iframe，但它给了我交叉原点的错误。 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.我在 plunker 中创建了一个用于打印 pdf 的演示。 http://embed.plnkr.co/WvaB9HZicxK6tC3OAUEw/ In this plunker i open pdf in new window but i want to directly print that pdf. http://embed.plnkr.co/WvaB9HZicxK6tC3OAUEw/在这个 plunker 中，我在新窗口中打开 pdf，但我想直接打印该 pdf。 how can i do that ?我怎样才能做到这一点 ？
Any suggestion will be appreciate, and you can correct if I am wrong.任何建议将不胜感激，如果我错了，您可以纠正。 Thanks谢谢
3 个解决方案
解决方案1
35 已采纳 2017-06-14 05:01:30
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.所以在这里我得到了我的问题的解决方案。在我的情况我的API返航binary data of pdf ，而浏览器没有打印的二进制数据到window.print，所以这第一个我转换成binary数据blob数据，然后创建Iframe的打印以下是它的代码。
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 :)我希望这可以帮助任何有此问题的人:)
解决方案2
0 2021-05-29 21:29:23
The previous solution may cause some security issues in newer browsers so we need to use the DOMSanitizer to make it a safe resource.之前的解决方案可能会在较新的浏览器中导致一些安全问题，因此我们需要使用 DOMSanitizer 使其成为安全资源。
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();
}
}
解决方案3
-3 2017-05-29 14:05:12
Look at https://github.com/devintyler/real-time-angular2/tree/master/plugin/print-pdf看https://github.com/devintyler/real-time-angular2/tree/master/plugin/print-pdf
simple and nice implementation.简单而漂亮的实现。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.