Fatal编程技术网
  • javascript/
  • Javascript 如何在Angular 2中打印Pdf

Javascript 如何在Angular 2中打印Pdf

javascript angular pdf

Javascript 如何在Angular 2中打印Pdf,javascript,angular,pdf,Javascript,Angular,Pdf,我有pdf文件的URL，exa URL是“test.example.com/incoice/1/download？auth_token=“some_token”，当我访问此URL时，URL将在浏览器中显示pdf 现在我想用打印功能打开这个pdf，我的意思是用户不必按CTRL+p 我尝试了iframe，但它给了我交叉原点的错误。 这是我使用的演示代码 //first try let _printIframe; var iframe = _printIframe; if (!_printIfra

我有pdf文件的URL，exa URL是“test.example.com/incoice/1/download？auth_token=“some_token”，当我访问此URL时，URL将在浏览器中显示pdf

现在我想用打印功能打开这个pdf，我的意思是用户不必按
CTRL+p

我尝试了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();

//第一次尝试
让我们打印框架；
变量iframe=_printIframe；
如果（！\u printIframe）{
iframe=_printIframe=document.createElement（'iframe'）；
document.body.appendChild（iframe）；
iframe.style.display='none'；
iframe.id=“printf”；
iframe.name=“printf”；
iframe.onload=函数（）{
setTimeout（函数（）{
iframe.focus（）；
iframe.contentWindow.print（）；
}, 1);
};
}
//第二次尝试
//pdf格式的SRC
iframe.src=“一些API URl”+“/下载？访问\u令牌=“+
this.authenticationService.currentTokenDetails.access\u令牌；
让url=iframe.src+“&output=embed”；
window.frames[“printf”].focus（）；
window.frames[“printf”].print（）；
var newWin=window.frames[“printf”]；
newWin.document.write（'dddddd'）；
newWin.document.close（）；
我在plunker中创建了一个用于打印pdf的演示。在这个plunker中，我在新窗口中打开了pdf，但我想直接打印那个pdf。我该怎么做

任何建议都将不胜感激，如果我错了，你可以纠正。 谢谢你看

简单而漂亮的实现。

所以我在这里找到了问题的解决方案 在我的情况下，我的API返回pdf的
二进制数据，而浏览器没有将该二进制数据打印到window.print中，因此首先我在
blob
数据中转换
binary
数据，然后创建
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();
});


给你！！

我希望这可以帮助任何有此问题的人：）
以前的解决方案可能会在较新的浏览器中导致一些安全问题，因此我们需要使用Domsanizer使其成为安全的资源


导出类PrintPdfService{
构造函数（受保护的消毒剂：DOMSANTIZER）{}
打印PDF（res）{
constpdf=newblob（[res]，{type:'application/pdf'}）；
const blobUrl=URL.createObjectURL（pdf）；
常量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（）；
}
}



好的，我会试试。我试过了。但对我不起作用。你能创建一个演示plunker吗？非常感谢。需要注意的是，这在Microsoft浏览器（IE和Edge）上不起作用。是一个关于如何解决该问题的问题。如果您只想在保存blob时打开blob，您可以参考。是否有任何解决方案可以在不打印对话框的情况下打印？我认为这对firefox不起作用。请参阅更多信息：如何在一次单击中打印多个文件