Javascript 如何在 Angular 2 中打印 PDF
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44244148/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Print Pdf in Angular 2
提问by Vishal
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+PI want to do this from my side.
现在我想用打印功能打开这个pdf，我的意思是用户不必按CTRL+P我想从我身边做这个。
I tried iframe but it gives me error of cross origin. This is demo code which i used
我试过 iframe，但它给了我交叉原点的错误。这是我使用的演示代码
//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 ?
我在 plunker 中创建了一个用于打印 pdf 的演示。http://embed.plnkr.co/WvaB9HZicxK6tC3OAUEw/在这个 plunker 中，我在新窗口中打开 pdf，但我想直接打印该 pdf。我怎样才能做到这一点 ？
Any suggestion will be appreciate, and you can correct if I am wrong. Thanks
任何建议将不胜感激，如果我错了，您可以纠正。谢谢
回答by Vishal
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 binarydata in blobdata and then create Iframefor 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 :)
干得好！！我希望这可以帮助任何有此问题的人:)
回答by Harish
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.
简单而漂亮的实现。
